webpack

概念：

webpack是模块加载器兼打包工具
可以把各种资源（如：JS（含JSX）、样式（含less/sass）、图片等）都作为模块来使用和处理。

作用和优势：

webpack 是以 commonJS 的形式来书写脚本，对 AMD/CMD 的支持也很全面
能被模块化的不仅仅是 JS 。
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
扩展性强，插件机制完善，
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

使用步骤

全局安装：

npm install webpack -g

查看版本

npm info webpack
webpack -v 如果没有出现
npm install --global webpack-cli，
注意:webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli；
之后再webpack -v

初始化项目：

npm init -y

局部安装：

npm install webpack --save-dev

01.png

配置：

每个项目根目录下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。

打包：

其他主要的参数有：

webpack --watch //监听变动并自动打包
webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包

webpack.config.js格式

var webpack = require('webpack');
module.exports = {
     entry:  { }, //页面入口文件配置
     output: { },  //文件输出配置
     module: {        //加载器配置
       rules: []
     },
    resolve: { } //其它解决方案配置
    plugins:{ }  插件
}

webpack.config.js的每项详细解释

entry

entry是页面入口文件配置，可以赋值为字符串，数组，对象。（默认打包依赖）

字符串：这个字符串作为主模块的启动点，输出的默认路径是dist，文件名默认是main.js
```
entry: "./js/demo01.js", //入口文件，需要打包的入口文件
```
数组:数组中所有模块会进行合并，输出的默认路径是dist，文件名默认是main.js
```
entry: ["./src/js/a.js","./src/js/b.js"], 
```
对象：会创建多个入口包。key就是块（chunk）名字。value就是一个字符串或者一个数组。
输入的默认路径是dist，输出的文件名就是key，即：分别是 index和home
```
   entry:{
        index:"./src/js/a.js",
        home:["./src/js/a.js","./src/js/b.js"], 
    }
```

注：终端无法运行webpack时候用cmd试试

output

output ：是输出项配置，表示入口文件最终要生成什么名字的文件、存放到哪里，其语法为：

output: {
    path: 输出文件所在的路径（绝对路径）,
    filename: 输出文件的名字
}

示例：

entry:{
    index:"./src/js/a.js",
    home:["./src/js/a.js","./src/js/b.js"], 
}
output:{
     path: __dirname+"/dist/",
     filename: "js/[name].bundle.js"
}

最终会生成一个 index.bundle.js 和 home.bundle.js，并存放到 ./dist/js/下

module.rules ：

配置模块加载的规则：告知 webpack 每一种类型的文件都需要使用什么加载器来处理：
示例：

module: {
   rules: [//加载器配置   
           {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader?sourceMap']
            },
            {
                test: /\.(png|jpg)$/,
                use: {
                    loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
                }
            }
        ]
 }

webpack的常见加载器（预处理）：
css的处理
style-loader：转换成style标签