由于我安装的是webpack 4.0后的版本,参考的资料又是4.0前的,所以遇到了很多问题:
以上黄色字体警告的解决办法:在webpack.config.js配置中添加 mode:'production'
webpack升级4.0新增mode属性,需在package.json中设置。
版本升级4.0后,需将webpack.config.js中的“loaders”修改为"rules"。
更换打包命令为$ webpack demo.js -o demo.bundle.js ,其中 demo.dundle.js是打包后生成的文件的文件名。与老命令相比多加一个-o。
解决方法参考:https://blog.csdn.net/lplife/article/details/80650993
经历了配置过程中的各种坑,终于成功安装上了webpack,并能成功把项目打包。
webpack 命令执行后,会默认载入当前目录的 webpack.config.js 文件。
__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
npm的start
命令是一个特殊的脚本名称,其特殊性表现在,在命令行中使用npm start
就可以执行其对于的命令。在package.json
中对scripts
对象进行相关设置即可→"start": "webpack"。
我们可以使用 webpack-dev-server 开发服务,这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
学习webpack参考:https://segmentfault.com/a/1190000006178770#articleHeader4
Loaders需要单独安装并且需要在webpack.config.js
中的modules
关键字下进行配置,Loaders的配置包括以下几方面:test,loader,include/exclude,query。
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件,就需要使用到 css-loader 和 style-loader,他们做两件不同的事情,css-loader 会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。
cnpm install css-loader style-loader
Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西:Loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个;插件并不直接操作单个文件,它直接对整个构建过程其作用。
安装一个htmlWebpackPlugin插件,$ npm i --save-dev html-webpack-plugin,这个插件的作用是依据一个简单的模板,帮助生成最终的Html5文件,这个文件中自动引用了打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。
filename: "js/[name]-[chunkhash].bundle.js" 在js文件夹下面存放不同哈希值的打包文件,[name]是入口文件名:
根据不同的页面指定不同的模板
关于webpack中<%= htmlWebpackPlugin.options.title %> 无法解析的原因:注释掉{test : /\.html$/, loader : 'html-loader'} 的loader即可正常显示htmlwebpackPlugin中变量的值。因为html-webpack-plugin会与全局配置的html-loader发生冲突,造成webpack无法解析ejs语句。同时注意大小写,我const的是HtmlWebpackPlugin,但是在<%= %>必须为:htmlWebpackPlugin。
紧接着我又遇到了一个问题,很神奇的是运行后除了main.html页面可以生成,a.html和b.html都显示了Cannot read property 'entry' of undefined。
解决方法:我的 index.html 文件里用 script 引用了 js,删除后重新运行就好了,注释没有用。