紧接上话

1、安装html-webpack-plugin

运行

npm install html-webpack-plugin@5.3.2 -D

配置：

在webpack.config.js中继续进行配置

//导入html-webpack-plugin插件
const HtmlPlugin = require('html-webpack-plugin')
    //new构造函数
const htmlPlugin = new HtmlPlugin({
    //指定复制页面
    template: './src/index.html',
    // 指定复制出来的文件名以及存放路径
    filename: './index.html'
})


module.exports = {
    ....
    ....
    // 插件数组
    plugins: [HtmlPlugin]
}

此时访问http://localhost:8080 已经可以直接访问内存中打包完的页面了。

首页中无需导入JavaScript文件，打包完的页面已经经过此插件自动注入js文件。

2、devServer简单配置

module.exports = {
    ....
    ....
     devServer: {
        open: true, //初次打包完成自动打开浏览器
        port: 80, //配置端口号，80则被省略
        host: '127.0.0.1' //指定运行的主机地址
    }
}

3、loader加载器

webpack默认只能打包以.js后缀结尾的模块，非js结尾的模块需要调用loader加载器才能正常打包。

配置css-loader

运行：

npm i style-loader@3.0.0 css-loader@5.2.6 -D

配置：

module.exports = {
    ....
    ....
     module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }
}

配置less-loader

 npm i less-loader@10.0.1 less@4.1.1 -D

module.exports = {
    ....
    ....
     module: {
        rules: [
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
        ]
    }
}

配置less-loader

 npm i less-loader@10.0.1 less@4.1.1 -D

module.exports = {
    ....
    ....
     module: {
        rules: [
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
        ]
    }
}

配置url-loader

 npm i url-loader@4.1.1 file-loader@6.2.0 -D

module.exports = {
    ....
    ....
     module: {
        rules: [
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            //图片比limit小，会被转为base64
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229' },
        ]
    }
}

4、打包高级语法 babel-loader

 npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

module.exports = {
    ....
    ....
     module: {
        rules: [
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229' },
            //exclude 排除文件
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
        ]
    }
}

项目根目录创建：babel.config.js文件

module.exports = {
//声明babel的可用插件
、、webpack在调用babel-loader的时候会先架子plugins插件来使用
    "plugins": [
        ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
}

5、打包发布

package.json文件中配置

    ...
"scripts": {
        "dev": "webpack serve",
        "build": "webpack --mode production"
    },
    ...

运行 npm run build

将对应的文件打包到对应的文件下

修改pakeage.json文件

module.exports = {
    ....
    ....
     module: {
        rules: [
        ...
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' },
           ...
        ]
    }
}

解决重复打包

npm i --save--dev clean-webpack-plugin

webpack.config.js文件中配置

    ...
    const {CleanWebpackPlugin}=require('clean-webpack-plugin')
    ...
    module.export={
        ...
            plugins: [htmlPlugin,new CleanWebpackPlugin()],
        ...
    }
    

6、Source Map

解决打包文件报错行数精确展示在浏览器,开发模式下运行时报错应于源代码一致。并且防止源代码在发布后暴露。

     ...
   module.export={
       ...
       //生产环境下，只定位具体行数，不暴露源码，将值改为nosources-source-map(实际发布建议改为nosources-source-map或者直接关闭）
       //想定位报错行数，又展示具体报错源码，可改为source-map
       //开发调试环境下建议改为eval-source-map
           devtool:'eval-source-map'
       ...
   }
   

7、其他

用@表示源码目录

   ...
   const {CleanWebpackPlugin}=require('clean-webpack-plugin')
   ...
   module.export={
       ...
       resolve:{
           alias:{
               '@':path.join(__disname,'./src/')
           }
       }
       ...
   }