webpack配置

最近复习了webpack的配置及的使用，贴出来方便自己翻看复习

1.简单打包js

    // npm install -g webpack wabpack-cli // 两个包在新环境下需要下载
    // npm init // 生成package.json
    // 创建文件webpack.config.js
    module.exports = {
    entry: './src/index.js', // 打包入口文件
    output: { // 文件出口
            path: __dirname + '/dist', // 当前路径下的输出地址绝对路径 __dirname绝对路径
            filename: 'index.js' // 打包输出文件名
        }
    }
    // npx webpack // 打包命令
    // 在package.json 的scripts中加入 "build": "webpack"  即可使用npm run build

2.加载css

    // npm install --save-dev style-loader css-loader
    // 然后在原webpack.config.js的导出对象中添加以下代码
     module: {
              rules: [
                {
                  test: /\.css$/,
                  use: [
                    'style-loader',
                    'css-loader'
                  ]
                }
              ]
            }

3.加载图片、字体

    // 作用于css中加载图片或者js文件中引用图片或引用字体
    // npm install --save-dev file-loader
    // css中引用图片
    // background: url(../img/11.jpg) no-repeat;

    // js文件中引用图片 例
    import icon from './img/1282.jpg'
    let img = new Image()
    img.src = icon
    app.appendChild(img)

    // 在原webpack.config.js配置中的module对象下的rules数组中添加
    {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
                'file-loader'
            ]
    },
    {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
        'file-loader'
        ]
    }

4.生成html,清理dist文件夹

    // npm install --save-dev html-webpack-plugin // 生成html
    // npm install clean-webpack-plugin --save-dev // 清理
    // 在原webpack.config.js配置中添加

    // 注意  下面的插件使用运行后每次生成新的html压缩代码 代码可定制
    const HtmlWebpackPlugin = require('html-webpack-plugin') // 生成
    // const CleanWebpackPlugin = require('clean-webpack-plugin') // 清理 // 官网有误
    // 注意  下面的插件使用运行后每次会将dist里没使用的代码搞掉
    const { CleanWebpackPlugin }= require('clean-webpack-plugin')
    // 并在原webpack.config.js的导出对象中添加以下代码
    // 模板下不要引入js  inject: true 会自动引
     plugins: [
        new HtmlWebpackPlugin({
            inject: true, // 不生成默认jssrc
            template:'./Template.html', // 模板html文件
            filename:'index.html' // 生成文件名
        }),
        // new CleanWebpackPlugin(['dist']) // 清理 // 官网有误
        new CleanWebpackPlugin()
    ]

5.错误源

    // 由于打包后的代码如果出现错误的话堆栈跟踪就会简单地指向到压缩后的源码，
    // 以下配置是为方便找到压缩有点代码错误源
    // 在原webpack.config.js配置中的module对象下添加
    devtool: 'inline-source-map'

6.监管代码

    // 在package的scripts中加入
    // "watch": "webpack --watch"


	//  npm install --save-dev webpack-dev-server
    // npm install webpack-cli@3.3 -D
    // 在原webpack.config.js配置中添加
const webpack = require('webpack')
    
devServer: {
        hot: true
    },
        // 在plugins下添加
new webpack.HotModuleReplacementPlugin()
// 在package.json 的scripts中加入
        // "hot":"webpack-dev-server" // 这个正确
        //"start": "webpack-dev-server --open"
// 使用npm start监管代码

7.mode

// 在原webpack.config.js配置中添加
// mode: 'development' // 开发环境
// mode: 'production' // 生产环境

8.复制静态文件

// npm install -D copy-webpack-plugin
// 在原webpack.config.js配置中添加
const copyWebpackPlugin = require('copy-webpack-plugin')

// 在plugins配置中添加
 new copyWebpackPlugin({
            patterns: [
                { 
                    // 源目录
                    from: path.join(__dirname,'assets'),
                    to: 'assets' // 输出到dist文件夹中的名字 
                }
            ],
        })

9.打包压缩cssjs并在页面中使用

// npm install optimize-css-assets-webpack-plugin -D 压缩css
// npm install terser-webpack-plugin -D // 压缩js
// npm install mini-css-extract-plugin -D // 引用打包css

// 引用css配置
// 在原webpack.config.js配置中添加
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 在plugins中添加
 new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
// 在module的rules数组中改
{test: /\.css$/,
       use: [
          MiniCssExtractPlugin.loader,
         // 'style-loader',
         'css-loader'
        ]
},
    
// css压缩、js压缩
const optimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require("terser-webpack-plugin");
// 在module.exports对象中添加
 optimization: {
        minimizer: [
            new TerserJSPlugin({}),
            new optimizeCSSAssetsPlugin({})
        ]
    },

package.json 配置应该是这个

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "preview": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "hot": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.3.2",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.0.3",
    "webpack": "^5.6.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

最后

webpack的配置还有很多，想深入的可以去官网看看。
第一篇技术类文章描述比较少，如果有什么不懂的可以评论提问，有时间看到了能帮到大家我就尽量帮，有不对的地方敬请指出。