webpack使用计算:

入门使用:

 图片 1

这几个报错表明须要设置相应的Loader,并在引用时指定相应的loader

执行成功如图:

 图片 2

chunk指相应的区块。

要是css引入科学:必须引入css-loader,要使改变的css生效,要引入style-loader;

逐条js的函数调用只可以在个其他函数中写,引入只是联合的意思,但并不大概直接使用引入的js的函数。

而且style-loader要写在css-loader的先头,否则报如下错误。

 图片 3

 图片 4

实施成功以往,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是同一的。

图片 5 

–progress  查看包装进度

–display-modules 查看包装的模块

–colors  打包后的吩咐加颜色区分

–display-reasons 突显打包原因

–watch
自动监听文件改变,若改动,自动打包,可是修改webpack配置需另行手动编译。

webpack 配置文件

报错:

 图片 6

output输出的路子写成那样:

 图片 7

而不是那样:

 图片 8

webpack打包完毕以往,彰显包装成功,但是并不曾生育打包的文本和文件夹,所以这边在path中挥之不去首先要写__dirname+“路径”

如图:

 图片 9

民用通晓:假如写成
__dirname+”/path”,则讲明现行还没有要放入的js的文书夹,这样会活动创造,否则就是进行成功,不过会看不到打包后的js文件,借使已经提前创制好要打包的js的寄放文件夹,则不要求写__dirname.
【常见难题】

 

若是改动了进口文件的数码,比如变成数组格局,或许目标方式,则需求再度手动运行npm
run webpack。

数组:用数组方式写七个入口文件,则会合并成指定的一个包装之后的公文

目的:分别打包成三个文件

留神:一个chunk代表一个区块,则差其他chunk会打包成差其他文书,倘使output写死成一个途径,则打包之后首个区块会覆盖第四个区块,解决办法,chunkname+hash作为占位,则有多少个区块就打包成几个区块
filename: “[name]-[hash].js”

 

报错原因:入口文件的门道写成了单引号套双引号,所以不识别。

 图片 10

hash值可以知道为版本号,唯有文件发出改变时,hash值才会转移。

hash值对静态资源的本子管理很有用。

webpack插件

npm安装该插件

npm install 插件名 –save-dev

一个很好用的webpack插件:html-webpack-plugin

安装

npm install html-webpack-plugin --save-dev

使用:

首先在webpack.config.js中引入该插件,

var htmlWebpackPlugin = require(‘html-webpack-plugin’);

然后只须要在webpack配置中modules扩展品质plugins,用来开始化插件。

写法如下:

plugins: [

new htmlWebpackPlugin() //初始化插件实例

]

设若要把温馨的html页面打包到对应的打包文件夹下:则给该插件映射一个模板:

plugins: [

new htmlWebpackPlugin({

template:”index.html”

})

]

如若html页面想要输出到打包文件夹最外层目录,然后js等文件要出口到js对应的文书夹下,则output输出的时候把js路径单独安排到相应的目录下的filename就足以。

代码如图:

output: {

        filename: "js/[name]-[hash].js",

        path: __dirname+"/dist"

},

出口的公文结构如图:

 图片 11

插件的习性:

plugins: [

        new htmlWebpackPlugin({

            filename:"index-[hash].html",

            template:'index.html',

            inject:"head",

            title:"我是title",

            date:new Date(),

        })

]

通过在plugins中定义的质量和值,能够在页面中用<%=
 %>模版引擎的方法显示出来。

eg:

<%= htmlWebpackPlugin.options.title %>

并且可以取到值之后进行for循环

<% for (var key in htmlWebpackPlugin.files){ %>

<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>

<% } %>

透过遍历files和options可以看到插件对应的都有怎样属性,那样页面中一旦有三个js,一些想放到尾部,一些像放到body中,就足以一直在页面中以模板引擎的艺术引入js了。

eg: <script type=”text/javascript src=”<%=
htmlWebPackPlugin.files.chunks.main.entry %>”>

[这会儿inject要记得设为false]

minify:压缩 【具体可参照官网 www.npmjs.com 中的htmp-webpack-plugin】

多页面配置:chunk:[]

plugin是一个数组,尽管要打包成八个页面,只需写八个成立插件对象的实例,给各个实例里写chunk属性,该属性是一个数组,每种数组里对应的js的称谓。

excludeChunks:[]    除一些以外

 

处理模板文件的loader

安装loader方法:

npm  install  xxx-loader  --save-dev

先是安装html-loader:

npm  install  html-loader  --save-dev

在webopack.config.js中配置该loader

  1. 先是写好温馨的html代码,

    模板文件处理 测试

  2. 然后再对应的js中import导入该html文件,

    import tpl from ‘../layer.html’;

    function layer() {

    return {
    
        name:'layer',
    
        tpl:tpl
    
    };
    

    }

    export default layer;

  3. 接下来去App.js中导入该js文件,

  4. 最后在App.js中渲染到index.html中

    import Layer from ‘./layer.js’;

    const App = function () {

    var dom = document.getElementById('app');
    
    var Layer = new Layer();
    
    dom.innerHTML = Layer.tpl;
    

    };

    new App();

关于html-loader的现实性代码,参见官网templating……

 

对于复杂的模板引擎,安装ejs-loader

后缀格式可以是.tpl/.ejs

当引入tpl的沙盘文件的时候,再次回到的不是一个字符串,是一个function

webpack配置:

{

    test:/\.ejs$/,

    loader:'ejs-loader'

 },



app.js

import Layer from './src/js/layer.js';

const App = function () {

    var dom = document.getElementById('app');

    var layer = new Layer();

    dom.innerHTML = layer.tpl({

        name:'John',

        arr:["1111","2222","3333"]

    });

};

new App();

layer.tpl

<div class="layer">

    <div>this is <%= name %> layer</div>

    <% for (var i = 0;i < arr.length; i++) { %>

        <%= arr[i] %>

    <% } %>

</div>

 

[webpack 3.0 报错]bundle.js:84 Uncaught TypeError: Cannot set property
‘innerHTML’ of null

 

拍卖图片及任何文件的loader

file-loader

安装loader

npm install file-loader –save-dev

webpack配置

{

     test:/\.(png|jpg|gif|svg)$/,

     loader:'file-loader'

 },

 

随便在根目录下的Index.html中一贯引用(相对路径不是难点,绝对难题可以被分析),仍然css中背景图片引用,亦恐怕是在模板文件中援引,在file-loader的效益下,都成功被分析。在模板引擎文件中,src可以以require(“相对路径”)
的样式 引入,就可以成功引入,不过一贯引用相对地址就不可以分析。

url-loader:

当图片小于指定大小的时候,使用url-loader,当不止指定大小的时候,自动转换为file-loader

{

   test:/\.(png|jpg|gif|svg)$/,

   loader:'url-loader',

   query:{

         limit:20000, //指定大小 ,单位kb

   name:"src/[name]-[hash:5].[ext]"

  }

 },

image-webpack  loader

图片压缩loader

相关文章

网站地图xml地图