Webpack -key word:安装配置&Loaders&Plugins&compilation

由于我安装的是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,删除后重新运行就好了,注释没有用。

猜你喜欢

转载自blog.csdn.net/Lakeson/article/details/84947902