Webpack初识

安装

全局安装：

npm install webpack -g

在项目目录下安装：

npm install webpack --save-dev

打包文件基础命令：

webpack source.js bundle.js

配置

在目录下创建webpack.config.js配置文件，另外也可以用--config指定配置文件；在配置文件用module.exports指定一个配置文件，各个配置参数都是以键值对的形式：

(1) 入口配置entry：字符串/数组/对象

字符串：单个入口文件

数组：单个入口，但是存在多个相互依赖的文件

对象：多个入口文件，此时对应的出口filename也要改成多出口形式，不然会报错

(2) 出口配置output:对象形式。其中path和filename字段表示打包的路劲和打包后的文件名，注意的是当存在多个入口的时候，打包的文件名要修改成自动生成的形式。例如用entry对象的键作为打包后文件名称的时候可以用 [name].js

(3)例子：

const path = require('path');

module.exports = {
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: {
        path: path.resolve(__dirname,'dist/js'),
        filename: '[name].js'
    }
}

(4)在终端输入webpack --help可以查看的webpack的所有命令行

(5)为了省去在终端输入命令的繁琐，可以在npm的包信息文件packjson.json文件中，在scripts对象中加入webpack的cli，然后在cmd中输入以下命令运行我们设置好的webpack命令：

npm rum webpack

插件

在项目中要引入打包后文件到html中，手动引入是比较繁琐的。另外如果打包文件名是随机的，比如hash来命名。这是可以用到webpack的一个插件html-webpack-plugin来解决这种需求。在项目中局部安装：

npm install html-wepack-plugin --save-dev

在webpack.config.js中加入plugins数组，数组元素为每个插件的实例对象。对象中用template指定模板文件，filename指定生成的文件

 

模版默认支持ejs模版语法。如果要向模版传递参数，可以先在插件对象中定义键值对，然后在模版中用<%= htmlWebpackPlugin.options.[key] %>来获取。

如果我们想要在js文件一部分在<head>，一部分在<body>引入，先在插件对象中设置inject为false，然后在模版中对应位置引入，如下：

模版中的设置如下：

 得到打包的html文件如下：

如果想要上线项目的话，引入的路径一般都要设置成绝对路劲的。这时候可以在output对象中加入publicPath，设置下服务器就行了。

如果项目是多页面的应用的情况，可以通过new多个该插件实例进行处理。因为我们每个页面要用到的入口都是不一样啊，所以我们可以为每个实例增加chunks属性，指定要用到的入口名称。另外可以用excludeChunks属性排除哪些不用的chunks，这种适合入口很多很多的情况，如下：

 更多关于该插件的属性用法请参照插件官网：>>点我点我

posted @ 2017-04-02 18:49  WOZIEN  阅读(160)  评论(0)    收藏  举报