webpack的配置

安装

npm i webpack webpack-cli

（webpack在4.x以上需要安装webpack-cli）

webpack使用时需要一个入口文件，在src下创建main.js作为入口文件，而且在main.js中可以使用任何模块化语法，什么AMD、CMD、node等等都可以使用。

当然浏览器是不认识这些模块化语法的，所以需要使用webpack对main.js这个文件进行打包。在打包的过程中，如果发现main.js中有引入其他的模块，那么会顺带将这些被依赖的模块也打包进来。

那么如何进行打包呢
在package.json中配置script标签
（script的作用是配置命令的别名）

"script":{
  //build 命令的别名
  //webpack  命令
  //./src/main.js  打包的文件
  //-o（output）  输入命令
  //./dist/bundle.js  输出文件
  "build": "webpack ./src/main.js -o ./dist/bundle.js" 
}

然后在控制台运行

npm run build

会在dist文件夹下生成bundle.js文件，所依赖的所有模块都打包进了这个文件中，所以在使用的时候直接引入这个文件就可以了，再也不用使用一堆一堆的引入语句了。

在控制台执行build命令进行打包时，会弹出一个warning

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

提示没有设置mode选项，默认会设置为production，mode=production的时候，打包出来的代码是压缩过的。
想要设置的话，可以把打包命令加上mode

"script":{
  "build":"webpack ./src/main.js -o ./dist/bundle.js --mode development"
}

到这里引入一个新问题，如果所有命令都配置到一行，那么也太长了，所以这里要开始使用webpack的配置文件了。

在项目根目录下新建一个叫做webpack.config.js的文件，这就是webpack的配置文件。
现在我们修改script标签内容如下：

"script":{
  "build":"webpack"
}

现在执行npm run build的时候，webpack会自动查询webpack.config.js文件，这个配置文件运行在node环境下（webpack都是运行在node环境下），所以这个文件的书写方式是nodejs语法。

const path = require('path')

module.exports = {
    //入口文件
    entry: path.join(__dirname, "src", "main.js"),
    //出口文件
    output:{
        path:path.join(__dirname, 'dist'),
        filename:'bundle.js'
    },
    mode:'development'
}

webpack可以打包js，不过却不认识其他类型文件，比如css，这时候我们需要做一些额外的工作来让webpack也可以打包这些资源。

loader

loader让webpack能够处理非js文件。loader可以将所有类型文件转换为webpack能够处理的有效模块，之后我们就可以使用webpack对他们进行打包处理了。

加载CSS

加载CSS需要在module配置中安装并添加style-loader和css-loader，css-loader解释@import和url()，会import/require()后再解析他们。
安装

npm install style-loader css-loader -D

配置

//处理js以外的模块
    module: {
        rules:[
            //rules中配置规则
            {
                //测试
                test: /\.css$/,
                //loader是从右向左加载的
                //css-loader    根据模块化语法找到css文件并进行解析
                //style-loader  把css-loader生成样式，通过style标签添加到页面中
                use:['style-loader', 'css-loader']
            }
        ]
    }

加载less

安装

npm install -D less-loader less

配置

{
  test:/.\less$/,
  use:[
    {"loader":"style-loader"},
    {"loader":"css-loader"},
    {"loader":"less-loader"}
  ]
}

加载图片

安装file-loader和url-loader
file-loader会把图片处理成另一个文件
url-loader会把图片使用base64编码存放在出口文件中，所以只适合小图片

 {
  test:/\.(jpg|gif|jpeg|png)$/,
  use:[
    {
      loader:"url-loader",
      //url-loader的加载规则
      options:{
        //打包成base64编码的图片的大小
        //如果图片小于8k,就使用url-loader来打包
        limit: 2 * 1024
      }
    }
  ]
}

如上配置及就可以了，如果图片大小超过了limit设置的值，会去使用file-loader加载。

使用babel处理ES6语法

安装

npm install --save-dev babel-loader @babel/core

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

只这样配置还不够，需要在项目根目录创建叫做.babelrc的文件
安装

npm install @babel/preset-env --save-dev

配置

{
  "presets": ["@babel/preset-env"]
}

如果配置不成功可以参考一下官网：https://www.babeljs.cn/docs/usage

插件

当使用webpack生成出口文件后（这里的是bundle.js），需要使用html去引用这个JS文件。

HtmlWebpackPlugin

这个插件简化了HTML文件的创建，以便为webpack打包提供服务。在每次webpack打包后生成一个html，并且把bundle.js引入进来。

[https://www.webpackjs.com/plugins/html-webpack-plugin/](https://www.webpackjs.com/plugins/html-webpack-plugin/)

webpack-dev-server

现在我们发现在每次文件内容更改后都要重新打包，非常麻烦，使用webpack-dev-server可以解决这个问题。
webpack-dev-server是webpack的一个辅助包，作用：
1.自动开启http服务
2.自动打开浏览器
3.自动监视文件变化
4.引入，每次修改代码，都重新打包

安装

npm i -D webpack-dev-server

配置

"script":{
  //把build属性的webpack改成webpack-dev-server
  //"build":"webpack"
  "build":"webpack-dev-server"
}

这里注意webpack-dev-server打包是打包在内存中的，在内存中读写文件性能比较高，但在实际开发时最终要打包成文件还是需要webpack的。

这里只是整理一下学习的思路，具体配置：
[https://webpack.js.org/configuration/dev-server/](https://webpack.js.org/configuration/dev-server/)
配置端口默认打开浏览器什么的都有...

配置上当项目大了每次改一点内容就全部打包也会很慢，这里最好把热更新打开，这样再打包的时候只会更新修改的代码部分。
然而使用热更新还需要加一个插件...

const webpack = require('webpack')
plugins:[
  ...,
  new webpack.HotModuleReplacementPlugin()
]

整体配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    //入口文件
    entry: path.join(__dirname, "src", "main.js"),
    //出口文件
    output:{
        path:path.join(__dirname, 'dist'),
        filename:'bundle.js'
    },
    mode:'development',
    //处理js以外的模块
    module: {
        rules:[
            //rules中配置规则
            {
                //测试
                test: /\.css$/,
                //loader是从右向左加载的
                //css-loader    根据模块化语法找到css文件并进行解析
                //style-loader  把css-loader生成样式，通过style标签添加到页面中
                use:['style-loader', 'css-loader']
            },
            {
                test:/.\less$/,
                use:[
                    {"loader":"style-loader"},
                    {"loader":"css-loader"},
                    {"loader":"less-loader"}
                ]
            },
            {
                test:/\.(jpg|gif|jpeg|png)$/,
                use:[
                    {
                        loader:"url-loader",
                        //url-loader的加载规则
                        options:{
                            //打包成base64编码的图片的大小
                            //如果图片小于8k,就使用url-loader来打包
                            limit: 2 * 1024
                        }
                    }
                ]
            },
            //使用babel处理高版本的es语法
            {
                //匹配所有js文件，把所有高版本语法转为低版本的
                test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin({
        template:path.join(__dirname, 'src', 'index.html')   
    }, 
    new webpack.HotModuleReplacementPlugin()
    )],
    //webpack-dev-server
    devServer:{
        open:true,
        hot:true
    }
}