<a href="https://s3.51cto.com/wyfs02/M00/9A/2A/wKiom1lSNCLzne2yAAAYN-kvG4s029.png-wh_500x0-wm_3-wmp_4-s_3676625829.png" target="_blank"></a>
这个报错说明需要安装相应的Loader,并在引用时指定相应的loader
执行成功如图:
<a href="https://s3.51cto.com/wyfs02/M01/9A/2A/wKiom1lSNCziWge8AAAujBht47U969.png-wh_500x0-wm_3-wmp_4-s_3959820103.png" target="_blank"></a>
chunk指相应的区块。
要是css引入正确:必须引入css-loader,要使改变的css生效,要引入style-loader;
各个js的函数调用只能在各自的函数中写,引入只是合并的意思,但并不能直接使用引入的js的函数。
而且style-loader要写在css-loader的前面,否则报如下错误。
<a href="https://s4.51cto.com/wyfs02/M01/9A/2B/wKioL1lSND3R-FJgAAAf48LhHIQ688.png-wh_500x0-wm_3-wmp_4-s_1619917425.png" target="_blank"></a>
<a href="https://s4.51cto.com/wyfs02/M02/9A/2A/wKiom1lSND3yRbRmAAAdNjWH1zE518.png-wh_500x0-wm_3-wmp_4-s_1743294142.png" target="_blank"></a>
执行成功之后,css插入到了head标签里。
loader正确顺序:”style-loader!css-loader!./style.css”
loader的加载顺序是从右向左加载,所以
loader正确顺序::style-loader!css-loader!postcss-loader!less-loader
sass-loader或者less-loader等语言预编译loader在webpack中的位置为:
1.最先放sass-loader或者less-loader
2.postcss-loader
3.css-loader
4.style-loader
注意:如果一个css中import导入另一个css,另一个css的postcss-loader没生效,这时要给css-loader加一个参数,指定import导入css的数量:
loader:’style-loader!css-loader?importLoaders=1!postcss-loader’
为了使用简便,不能每次在引入css的时候加loader,则可以在命令中实现:
webpack hello.js bundle.js --module-bind 'css=style-loader!css-loader'
去掉模块引入css时加入的loader,1.x可以,3.0依旧会报错。
--watch
在命令后面加 --watch ,可以不用每次改动都执行命令,而是自动改变
注意:修改了webpack配置需要重启,即即使设置了监听也要手动重新编译;
关于版本安装问题:把想要安装的npm 模块的名称和版本号写在package.json的依赖里,然后npm install就会自动安装
但是,每次输入很多命令依旧很繁琐,解决办法:
如果要提前配置好输入的webpack命令,则在package.json中的script下,定义一个webpack属性,后面定义所有要输入的webpack的命令,定义好之后,在命令窗口 运行 命令 npm run webpack即可,定义方式与定义npm run dev中的dev是一样的。
<a href="https://s5.51cto.com/wyfs02/M02/9A/2A/wKiom1lSNFSiYdGNAAAhxS5ZBaY741.png-wh_500x0-wm_3-wmp_4-s_2200484769.png" target="_blank"></a>
--progress 查看打包过程
--display-modules 查看打包的模块
--colors 打包后的命令加颜色区分
--display-reasons 显示打包原因
--watch 自动监听文件改变,若改动,自动打包,但是修改webpack配置需重新手动编译。
报错:
<a href="https://s5.51cto.com/wyfs02/M02/9A/2B/wKioL1lSNGGAAld7AAAWIM2yUks929.png-wh_500x0-wm_3-wmp_4-s_4045632248.png" target="_blank"></a>
output输出的路径写成这样:
<a href="https://s4.51cto.com/wyfs02/M01/9A/2B/wKioL1lSNHvxBwjbAAAVCkOGV2M991.png-wh_500x0-wm_3-wmp_4-s_3396784820.png" target="_blank"></a>
而不是这样:
<a href="https://s5.51cto.com/wyfs02/M02/9A/2A/wKiom1lSNIbgUcAAAAANoOd7rFQ815.png-wh_500x0-wm_3-wmp_4-s_3249762308.png" target="_blank"></a>
webpack打包完成之后,显示打包成功,但是并没有生产打包的文件和文件夹,所以这里在path中切记首先要写__dirname+“路径”
如图:
<a href="https://s5.51cto.com/wyfs02/M02/9A/2B/wKioL1lSNJnQaB0wAAAZI1TIVC4696.png-wh_500x0-wm_3-wmp_4-s_561672318.png" target="_blank"></a>
个人理解:如果写成 __dirname+”/path”,则说明现在还没有要放入的js的文件夹,这样会自动创建,否则即使执行成功,但是会看不到打包后的js文件,如果已经提前创建好要打包的js的存放文件夹,则不需要写__dirname. 【常见问题】
如果更改了入口文件的数量,比如变成数组形式,或者对象形式,则需要重新手动运行npm run webpack。
数组:用数组形式写多个入口文件,则会合并成指定的一个打包之后的文件
对象:分别打包成多个文件
注意:一个chunk代表一个区块,则不同的chunk会打包成不同的文件,如果output写死成一个路径,则打包之后第二个区块会覆盖第一个区块,解决办法,chunkname+hash作为占位,则有几个区块就打包成几个区块 filename: "[name]-[hash].js"
报错原因:入口文件的路径写成了单引号套双引号,所以不识别。
<a href="https://s3.51cto.com/wyfs02/M01/9A/2A/wKiom1lSNK7gz8BtAAA8E0K3TTI160.png-wh_500x0-wm_3-wmp_4-s_4223127714.png" target="_blank"></a>
hash值可以理解为版本号,只有文件发生改变时,hash值才会变化。
hash值对静态资源的版本管理很有用。
npm安装该插件
npm install 插件名 --save-dev
一个很好用的webpack插件:html-webpack-plugin
安装
<code>npm </code><code>install</code> <code>html-webpack-plugin --save-dev</code>
使用:
首先在webpack.config.js中引入该插件,
var htmlWebpackPlugin = require('html-webpack-plugin');
然后只需要在webpack配置中modules增加属性plugins,用来初始化插件。
写法如下:
<code>plugins: [</code>
<code>new</code> <code>htmlWebpackPlugin() </code>
<code>]</code>
如果要把自己的html页面打包到对应的打包文件夹下:则给该插件映射一个模版:
<code>new</code> <code>htmlWebpackPlugin({</code>
<code>template:”index.html”</code>
<code>})</code>
如果html页面想要输出到打包文件夹最外层目录,然后js等文件要输出到js对应的文件夹下,则output输出的时候把js路径单独配置到对应的目录下的filename就可以。
代码如图:
<code>output: {</code>
<code> </code><code>filename: </code><code>"js/[name]-[hash].js"</code><code>,</code>
<code> </code><code>path: __dirname+</code><code>"/dist"</code>
<code>},</code>
输出的文件结构如图:
<a href="https://s2.51cto.com/wyfs02/M01/9A/2B/wKioL1lSNLngaSsFAAAJ42G4KKg366.png-wh_500x0-wm_3-wmp_4-s_1924461025.png" target="_blank"></a>
插件的属性:
<code> </code><code>new htmlWebpackPlugin({</code>
<code> </code><code>filename:</code><code>"index-[hash].html"</code><code>,</code>
<code> </code><code>template:</code><code>'index.html'</code><code>,</code>
<code> </code><code>inject:</code><code>"head"</code><code>,</code>
<code> </code><code>title:</code><code>"我是title"</code><code>,</code>
<code> </code><code>date</code><code>:new Date(),</code>
<code> </code><code>})</code>
通过在plugins中定义的属性和值,可以在页面中用<%= %>模版引擎的方式展现出来。
eg:<%= htmlWebpackPlugin.options.title %>
并且可以取到值之后进行for循环
<code><% </code><code>for</code> <code>(var key </code><code>in</code> <code>htmlWebpackPlugin.files){ %></code>
<code><%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files</code><code>[key]</code><code>) %></code>
<code><% } %></code>
通过遍历files和options可以看到插件对应的都有哪些属性,这样页面中如果有多个js,一些想放到头部,一些像放到body中,就可以直接在页面中以模板引擎的方式引入js了。
eg: <script type=”text/javascript src=”<%= htmlWebPackPlugin.files.chunks.main.entry %>”>
[此时inject要记得设为false]
多页面配置:chunk:[]
plugin是一个数组,如果要打包成多个页面,只需写多个创建插件对象的实例,给每个实例里写chunk属性,该属性是一个数组,每个数组里对应的js的名称。
excludeChunks:[] 除一些以外
安装loader方法:
<code>npm </code><code>install</code> <code>xxx-loader --save-dev</code>
首先安装html-loader:
<code>npm </code><code>install</code> <code>html-loader --save-dev</code>
在webopack.config.js中配置该loader
1. 首先写好自己的html代码,
<code><</code><code>div</code> <code>style</code><code>=</code><code>"background-color:red;width:100%;height:100%"</code><code>></code>
<code> </code><code><</code><code>h1</code><code>>模板文件处理 测试</</code><code>h1</code><code>></code>
<code></</code><code>div</code><code>></code>
<code>2. 然后再对应的js中import导入该html文件,</code>
<code>import tpl from '../layer.html';</code>
<code>function layer() {</code>
<code> </code><code>return {</code>
<code> </code><code>name:'layer',</code>
<code> </code><code>tpl:tpl</code>
<code> </code><code>};</code>
<code>}</code>
<code>export </code><code>default</code> <code>layer;</code>
3. 然后去App.js中导入该js文件,
4. 最后在App.js中渲染到index.html中
<code>import Layer from </code><code>'./layer.js'</code><code>;</code>
<code>const App = </code><code>function</code> <code>() {</code>
<code> </code><code>var</code> <code>dom = document.getElementById(</code><code>'app'</code><code>);</code>
<code> </code><code>var</code> <code>Layer = </code><code>new</code> <code>Layer();</code>
<code> </code><code>dom.innerHTML = Layer.tpl;</code>
<code>};</code>
<code>new</code> <code>App();</code>
有关html-loader的具体代码,参见官网templating……
对于复杂的模板引擎,安装ejs-loader
后缀格式可以是.tpl/.ejs
当引入tpl的模板文件的时候,返回的不是一个字符串,是一个function
webpack配置:
<code>{</code>
<code> </code><code>test:/\.ejs$/,</code>
<code> </code><code>loader:</code><code>'ejs-loader'</code>
<code> </code><code>},</code>
app.js
<code>import Layer from </code><code>'./src/js/layer.js'</code><code>;</code>
<code> </code><code>var</code> <code>layer = </code><code>new</code> <code>Layer();</code>
<code> </code><code>dom.innerHTML = layer.tpl({</code>
<code> </code><code>name:</code><code>'John'</code><code>,</code>
<code> </code><code>arr:[</code><code>"1111"</code><code>,</code><code>"2222"</code><code>,</code><code>"3333"</code><code>]</code>
<code> </code><code>});</code>
layer.tpl
<code><</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code><code>>this is <%= name %> layer</</code><code>div</code><code>></code>
<code> </code><code><% for (var i = 0;i < arr.length; i++) { %></code>
<code> </code><code><%= arr[i] %></code>
<code> </code><code><% } %></code>
[webpack 3.0 报错]bundle.js:84 Uncaught TypeError: Cannot set property 'innerHTML' of null
处理图片及其他文件的loader
file-loader
安装loader
<code>npm </code><code>install</code> <code>file</code><code>-loader --save-dev</code>
webpack配置
<code> </code><code>test:/\.(png|jpg|gif|svg)$/,</code>
<code> </code><code>loader:</code><code>'file-loader'</code>
无论是在根目录下的Index.html中直接引用(绝对路径没有问题,相对问题可以被解析),还是css中背景图片引用,亦或者是在模版文件中引用,在file-loader的作用下,都成功被解析。在模版引擎文件中,src可以以require(“相对路径”) 的形式 引入,就可以成功引入,但是直接引用相对地址就不可以解析。
url-loader:
当图片小于指定大小的时候,使用url-loader,当大于指定大小的时候,自动转换为file-loader
<code> </code><code>test:/\.(png|jpg|gif|svg)$/,</code>
<code> </code><code>loader:</code><code>'url-loader'</code><code>,</code>
<code> </code><code>query:{</code>
<code> </code><code>limit:20000, </code><code>//指定大小 ,单位kb</code>
<code> </code><code>name:</code><code>"src/[name]-[hash:5].[ext]"</code>
<code> </code><code>}</code>
image-webpack loader
图片压缩loader
本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1942489,如需转载请自行联系原作者