演示

# demo-webpack **Repository Path**: 843571091/demo-webpack ## Basic Information - **Project Name**: demo-webpack - **Description**: webpack 中引入传统的jQuery和jQuery插件 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2018-07-24 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 1、安装webpack和loader 为什么要安装webpack? 因为我们要用到webpack的 expose-loader。当然,webpack的打包功能我们也要用到。 ``` mkdir demo-webpack && cd demo-webpack npm init cnpm install webpack webpack-cli --save-dev cnpm install expose-loader -D cnpm install --save jquery ``` 上面的命令，我们创建并初始化了一个demo-webpack项目，然后安装了 `webpack webpack-cli expose-loader jquery` *注意jquery是`--save`的，webpack打包的时候会把jquery也打包到bundle.js* 2、新建`webpack.config.js` ``` const path = require('path'); module.exports = { mode:"development", entry:"./src/main.js", output:{ path: path.resolve(__dirname, 'dist'), filename:"bundle.js" }, module:{ rules: [ { test: require.resolve('jquery'), use: [ { loader: 'expose-loader', options: '$' }, { loader: 'expose-loader', options: 'jQuery' } ] } ] } } ``` 注意： `require.resolve('jquery')`下面会解释 3、新建src文件夹和main.js(webpack配置文件中的入口文件) ``` import 'jquery'; import '../public/plugin/banner/js/velocity' import '../public/plugin/banner/js/shutter' $(function () { $('.shutter').shutter({ shutterW: 2560, // 容器宽度 shutterH: 1080, // 容器高度 isAutoPlay: true, // 是否自动播放 playInterval: 3000, // 自动播放时间 curDisplay: 0, // 当前显示页 fullPage: false // 是否全屏展示 }); }); ``` 当webpack构建时，遇到`import 'jquery';`,就会告诉expose-loader处理。第2步创建的webpack配置文件中的这句话`require.resolve('jquery')`,意思就是 *当检测到 import jquery 或者 require('jquery')* 时,就把jquery的返回值（这里用返回值描述可能不正确）暴露给window.$或者window.jQuery。结果jQuery对象就绑定到全局window对象上了。当然，既然在这里已经绑定到window上了，那在其他模块里面就不需要再通过`import jQuery`导入jQuery了。直接使用即可。我们在这里（main.js）导入了一个jquery的轮播插件shutter.js，直接使用就好。 4、修改package.json,添加一个脚本，用于执行webpack打包命令 ``` "scripts": { "webpack": "webpack --progress --display-modules --colors --watch", "test": "echo \"Error: no test specified\" && exit 1" }, ``` 5、执行`npm run webpack` 若没错误，即可生成 `dist\bundle.js` 6、在页面里引入这个bundle.js就行了 ``` 演示

``` # 引入babel 编译es6语法我们在main.js中加入这样一句lamda表达式 `export const calculator = num => num * num;` 然后，执行npm run webpack 用IE11打开index.html会发现报错了(chrome和firefox等现代浏览器不报错) 为了解决这个错误，我们需要引入babel 和 babel-polyfill 1、安装babel依赖 `cnpm install babel-loader babel-core babel-preset-env --save-dev` 2、在webpack.config.js中增加规则： ``` module:{ rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env'] } } } ] } ``` **babel-polyfill官方：https://babeljs.io/docs/en/babel-polyfill** 现在再打包一次，刷新一下IE浏览器，错误已经没有了。当需要用到更新颖的es6语法时，需要引入babel-polyfill (安装babel-polyfill是为了‘垫’出一个环境) 3、安装 babel-polyfill `cnpm install --save babel-polyfill`: 注意不是 --save-dev 4、~~在入口文件(main.js)的顶部导入 `import "babel-polyfill";`或者下一步~~ 5、~~With webpack.config.js, add babel-polyfill to your entry array: `entry: ["babel-polyfill", "./src/main.js"]`~~ 步骤4、5不加好像也行 # 在模块里引入css文件我们在index.html里引入了一个css文件 ``` ``` 现在我们要把它打包到bundle.js里，所以在main.js里导入它 `import '../public/plugin/banner/css/shutter.css'` 同时注释掉 ` ` 1、只是这样还不行，我们还需要安装三个loader `style-loader css-loader url-loader` ``` cnpm install --save-dev style-loader css-loader url-loader ``` style-loader 是把打包好的css插入到html页面中的 url-loader: 因为图片中引用了图片路径，所以需要它处理 2、在webpack.config.js中增加这几条规则 ``` { test: /\.css$/, use: ['style-loader','css-loader'] }, { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] }, ``` 重新运行 npm run webpack ，打开页面，一切正常 # 使用 HtmlWebpackPlugin 插件我们打包出来的dist目录只有一个bundle.js,而我们的index.html是在src目录下的。现在我想把index.html也打包到dist目录，这样我发布的时候只需要拷贝dist就行了。（如果现在发布，需要打包dist、src、public-图片） 1、安装插件 `cnpm install --save-dev html-webpack-plugin` 2、修改webpack.config.js ``` //在文件顶部增加 var HtmlWebpackPlugin = require('html-webpack-plugin'); //然后再增加 plugins: [ new HtmlWebpackPlugin({ title:"webpack自动演示系统", template:"./src/index.html" }) ] ``` 3、修改index.html的title ``` <%= htmlWebpackPlugin.options.title %> ``` 4、执行打包，index.html就拷贝到dist\index.html了 ## 怎么把html中引入的图片打包到dist目录？ ```

``` **使用html-loader**: 网上很多人说用 `html-withimg-loader`,我试了是可以的，但是还是用官方的html-loader吧！ 1、安装 `cnpm install -D html-loader file-loader` html-loader 依赖file-loader,如果不安装file-loader，打包的时候会报错的。 2、增加配置 ``` { test: /\.(html)$/, use: { loader: 'html-loader', options: { attrs: ['img:src'] } } }, ``` 同时修改一下图片处理的loader ``` { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192, name: 'img/[hash:8].[name].[ext]' } } ] } ``` 增加了一行 `name: 'img/[hash:8].[name].[ext]'` 主要是为了打包后生成的图片名称美观一点，默认是一串16进制的字符串。 3、`npm run webpack` ,查看dist/index.html里图片链接已变成 img/***.jpg了 ## 怎么把html中引入的视频也打包到dist目录？和上面一样，不过要修改一下html-loader(增加video:src),同时增加一个url-loader检测mp4文件 ``` { test: /\.(html)$/, use: { loader: 'html-loader', options: { attrs: ['img:src', 'video:src'] } } }, { test:/\.(mp4)$/, use:[ { loader:"url-loader", options:{ limit:10000, name:'video/[name].[ext]' } } ] } ``` 如果页面中有 `

` ,那么打包后的 src地址也会被修改。 ## 安装 clean-webpack-plugin clean-webpack-plugin 用于清理文件 1、`npm install --save-dev clean-webpack-plugin` 2、 ``` const CleanWebpackPlugin = require('clean-webpack-plugin'); plugins: [ new CleanWebpackPlugin(['dist']) ], ``` 这是我的示例代码【欢迎访问】： [gitee: demo-webpack](https://gitee.com/843571091/demo-webpack)