webpack4+配置及优化

1. 安装

首先安装webpack，参考https://blog.csdn.net/zl13015214442/article/details/96117592一文。

2. 配置

webpack通过webpack.config.js来配置，来看一下文件构造（zlpack可以忽略）：

在webpack.config.js中基本的配置有：

// 基于node的 遵循commonJS规范
let path = require('path');
module.exports = {
    entry: "./src/index.js",  // 入口
    output: {
        filename: 'build.js',
        // 这个路径必须是绝对路径，path.resolve就是根据当前的路径解析返回一个绝对路径
        path: path.resolve('./build')
    },  // 出口
    devServer: {},  // 开发服务器
    module: {}, // 模块配置
    plugins: [],  //插件的配置
    mode: 'development', // 可以更改模式 
    resolve: {},  // 配置解析
}

这样配置之后，执行npx webpack就会自动生成build/build.js，将入口文件打包到build.js中，而且在配置文件中设置了mode之后，我们就不需要再执行webpack命令的时候设置mode了。打包后得到的build.js也可以在浏览器中执行。

3. 配置开发服务器

现在的问题是我们每次执行打包命令都会生成一个真实的文件build.js，为了提高性能，我们应该在内存中打包，这就联系到我们在webpack中应该如何配置开发服务器–webpack-dev-server。

• 安装webpack-dev-server
  
  安装好之后，我们如果执行的话一般通过npx命令来执行，但是有些麻烦，因此我们可以在package.json文件的scripts中配置一些我们自定义的脚本：
  
  那我们就可以直接执行npm run start来运行开发服务器了。
  PS：json文件中一定不能写注释！！！
  执行结果：
  
  可以看到起了一个端口号8080，而不是真正的生成一个文件，并且提示webpack的输出来自根目录webpack-public下，我们打开看一下，可以看到根目录下所有的文件：
  
  而我们真正想看的是build下的文件，而不是所有的，所以需要在配置文件中设置直接定位到build文件下，并且在执行执行之前先把我们目录下的build.js文件删掉：

// 基于node的 遵循commonJS规范
let path = require('path');
module.exports = {
    entry: "./src/index.js", 
    output: {
        filename: 'build.js',
        path: path.resolve('./build')
    },
    devServer: {
        contentBase: './build'
    },  // 开发服务器
    module: {}, // 模块配置
    plugins: [],  //插件的配置
    mode: 'development', // 可以更改模式 
    resolve: {},  // 配置解析
}

刷新页面：

这个时候再来看我们的文件目录，没有生成真正的文件build.js，但是在浏览器中可以访问到：

另外我们可以访问在build文件夹创建的其他文件。还可以配置端口号、压缩等其他参数：

    devServer: {
        contentBase: './build',
        port: 3000,
        compress: true,  // 服务器压缩
        open: true  // 自动打开浏览器localhost:3000
    },  // 开发服务器

而我们想要打包出一个真实的文件时，执行在scripts中我们配置的命令npm run build就可以了。
而我们想要在浏览器中查看效果时，不能每次都在build文件夹下新建index.html引入打包后的build.js文件，理想的情况是在src中创建一个html文件，然后打包后的文件引入到该html文件中，引完再打包到build文件夹下，这一步可以通过配置插件自动地来实现。

4. 配置插件

通过配置插件html-webpack-plugin可以将html文件打包到build下，可以自动引入生产的js文件。

（1）html-webpack-plugin插件

• 安装插件html-webpack-plugin
  

• 引入
  通过require引入，然后new一个实例，传入对象，确定我们是以index.html这个文件为固定模板自动引入生产的js文件，而无需我们手动导入，首先在src目录下新建index.html：
  
  在配置文件中配置：

// 基于node的 遵循commonJS规范
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: "./src/index.js",  
    output: {
        filename: 'build.js',
        path: path.resolve('./build')
    },  // 出口
    devServer: {
        contentBase: './build',
        port: 3000,
        compress: true, 
        open: true  
    },  
    module: {}, // 模块配置
    plugins: [ //插件的配置
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],  
    mode: 'development', // 可以更改模式 
    resolve: {},  // 配置解析
}

我们可以运行npm run build打包出一个真实的build.js文件，打包之后我们可以发现在build文件夹下已经打包出两个实体文件了：

并且打包生成的index.html中已经自动引入了打包后的build.js：

这时候我们希望修改title标签的内容，可以在配置文件中设置参数：

    plugins: [ //插件的配置
        new HtmlWebpackPlugin({
            template: './src/index.html',
            title: 'excellent coder!'
        })
    ],  

在打包前的src/index.html中通过ejs模板设置：

再次打包看打包后的build/index.html：

其中的