关于 Webpack4 基础配置介绍

1. 构建时有三种hash模式：    1. hash：每次构建都会生成一个唯一hash值，js和css同使用一个hash    2. chunkhash：根据chunk生成的hash值，如果打包来自同一个chunk，那么哈希值是一样的,  例如再index.js中引入style.css，哈希一样    3. contenthash: 根据文件的内容生成的hash值，不同文件hash值不一样，内容更改hash值变化

   // 局部安装版本4需要安装cli     指定版本安装: npm i webpack@xxx.xx

默认入口模块：./src/index.js默认输出文件名为:main.js  默认路径为 "./dist"默认支持多种模块类型： conmmonJS esmodule AMD默认支持js模块和json模块

// 默认webpack配置文件// !使用ComminJS规范导出一个对象const path = require('path');
module.exports = {  // webpack执行构建的入口  entry: './src/index.js',  // 输出  output: {    // 输出文件的存放路径(绝对路径)    path: path.resolve(__dirname, 'dist'),    // 将所有依赖的模块合并输出到main.js    filename: 'main.js'  },  // 模式：开发模式development/生产模式production  mode: 'development',  module: {      rules: []  },  devServer: {},  plugins:[]};

  // 模块处理:对象  module: {    rules: [      // !loader是有执行顺序的，自右往左      // 处理图片      // https://webpack.docschina.org/loaders/file-loader/      {        test: /\.(png|jpe?g|gif)$/i,        use: [          {            loader: 'file-loader',            options: {              name: '[name]_[hash:6].[ext]',              // 将图片统一放在一个文件夹内              outputPath: 'images'            }          }        ]      },      // 字体文件处理      {        test: /\.woff2$/,        use: [          {            loader: "file-loader"          }        ]      },      // 处理样式：https://webpack.docschina.org/loaders/style-loader/      {        test: /\.css$/,        use: [          { loader: "style-loader", options: { injectType: "singletonStyleTag" } },          "css-loader"        ]      },        /*        处理less：        https://webpack.docschina.org/loaders/less-loader/        处理CSS3兼容：        https://webpack.docschina.org/loaders/postcss-loader/        */      {        test: /\.less$/,        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']      },        // 处理html文件的img图片      {        test: /\.html$/,        loader: 'html-loader'      },      // 处理其它资源      {        exclude: /\.(html|js|css|less|jpe?g|png|gif)/,        loader: 'file-loader',        options: {          name: '[hash:6].[ext]'        }      }    ]  }

// 插件// 安装：npm i --save-dev html-webpack-pluginplugins: [new HtmlWebpackPlugin({    title: 'webpack',    // 模板路径    template: './src/index.html',    // 重命名    filename: 'app.html'  })]

npm i --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')...    new HtmlWebpackPlugin({      title: 'webpack',      template: './src/index.html',      filename: 'kkb.html'    }),

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

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

npm i postcss-loader autoprefixer -D

// postcss.config.jsmodule.exports = {  plugins: [    require('autoprefixer')({      // 最近的两个版本，市场份额大于1%      overrideBrowserslist: ["last 2 versions", ">1%"]    })  ]}

npm i mini-css-extract-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin')module: {    rules: [      {        test: /\.less$/,        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']      }    ]},plugins: [  new MiniCssExtractPlugin()]

npm i optimize-css-assets-webpack-plugin -D

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')module: {    rules: [      {        test: /\.less$/,        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']      }    ]},plugins: [  new OptimizeCssAssetsWebpackPlugin()]

mode: 'development',module: {rules: [...]},devtool: 'eval-cheap-module-source-map',plugins: []

安装：npm i webpack-dev-server -D

"scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "server": "webpack-dev-serve",    "start": "webpack serve --open Chrome.exe"  },

devServer: {  // 打包目录    contentBase: './dist',    // 是否启用gzip压缩    compress: true,    // 模块热替换    hot: true,    // 设置端口号    port: 3000  },

export default print;function print() {  console.log('pr2ingd');}

// 监听js文件变化开启HMRimport printMe from './print.js';if (module.hot) {  // 一旦module.hot为true 说明开启了HMR功能  module.hot.accept('./print.js', function () {      // 监听print.js变化，一旦发生变化，其它模块不会重新打包构建    console.log('Accepting the updated printMe module!');      // 执行回调函数    printMe();  })}

// webpack 是基于node.js的const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin } = require('clean-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 复用CssLoader,提取样式并作兼容性处理const commonCssLoader = [  MiniCssExtractPlugin.loader,  'css-loader',  'postcss-loader',];
module.exports = {  // webpack执行构建的入口  entry: ['./src/index.js', './src/index.html'],  // 输出  output: {    // 输出文件的存放路径(绝对路径)    path: path.resolve(__dirname, 'dist'),    // 将所有依赖的模块合并输出到main.js    filename: '[name].js',  },  // 模式development/production  mode: 'production',  // 模块处理:对象  module: {    rules: [      // !loader是有执行顺序的，自右往左      // 语法检查      {        test: /\.js$/,        exclude: /node_modules/,        // 优先执行        enforce: 'pre',        loader: 'eslint-loader',        options: {          fix: true,        },      },      {        oneOf: [          // js兼容性处理：babel-loader          {            test: /\.js$/,            exclude: /node_modules/,            loader: 'babel-loader',            options: {              // 预设，指示babel做怎样的兼容性处理              presets: [                [                  '@babel/preset-env',                  {                    // 兼容性按需加载                    useBuiltIns: 'usage',                    corejs: {                      version: 3,                    },                    // 指定兼容性版本浏览器                    targets: {                      chrome: '60',                      firefox: '60',                      ie: '9',                      safari: '10',                      edge: '17',                    },                  },                ],              ],            },          },          // 处理图片          // https://webpack.docschina.org/loaders/file-loader/          {            test: /\.(png|jpe?g|gif)$/i,            use: [              {                loader: 'file-loader',                options: {                  name: '[name]_[hash:6].[ext]',                  // 将图片统一放在一个文件夹内                  outputPath: 'images',                },              },            ],          },          // 字体文件处理          {            test: /\.woff2$/,            use: [              {                loader: 'file-loader',              },            ],          },          // 处理样式          {            test: /\.css$/,            use: [              ...commonCssLoader,              // 将所有内联样式放在一个style里              // { loader: 'style-loader', options: { injectType: 'singletonStyleTag' } },              // 'css-loader',            ],          },          {            test: /\.less$/,            use: [...commonCssLoader, 'less-loader'],          },          // 处理html文件的img图片          {            test: /\.html$/,            loader: 'html-loader',          },          // 处理其它资源          {            exclude: /\.(html|js|css|less|jpe?g|png|gif)/,            loader: 'file-loader',            options: {              name: '[hash:6].[ext]',              outputPath: 'media',            },          },        ],      },    ],  },  devtool: 'eval-cheap-module-source-map',  // 开发服务器 用来自动化  devServer: {    contentBase: './dist',    compress: true,    hot: true,    port: 3000,  },  plugins: [    new HtmlWebpackPlugin({      title: 'Development',      template: './src/index.html',      filename: 'kkb.html',    }),    new CleanWebpackPlugin(),    new MiniCssExtractPlugin({      // 对输出的css文件整个重命名      filename: '[name]_[chunkhash:8].css',    }),    new OptimizeCssAssetsWebpackPlugin(),  ],};

{    test: /\.js$/,    exclude: /node_modules/,    loader: 'babel-loader',    options: {      // 预设，指示babel做怎样的兼容性处理      presets: [        [          '@babel/preset-env',          {            // 兼容性按需加载            useBuiltIns: 'usage',            corejs: {              version: 3,            },            // 指定兼容性版本浏览器            targets: {              chrome: '60',              firefox: '60',              ie: '9',              safari: '10',              edge: '17',            },          },        ],      ],      // 开启babel缓存，第二次构建时会读取之前的缓存      cacheDirectory: true,    },},

// 单入口entry: ['./src/index.js', './src/index.html'],// 多入口entry: {  index: './src/index.js',  text: './src/text.js'  },// 使用split打包optimization: {splitChunks: {  chunks: 'all',},},

// 在index.js文件中或其它jsimport(/* webpackChunkName: 'test' */'./test').then(({mul, count}) => {console.log(mul(2, 5))}).catch(() => {console.log('文件加载失败!');})

// 在index.js文件中或其它jsdocumentgetElementById('btn').onclick = function() {    // 懒加载    import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test')    .then(({mul, count}) => {    console.log(mul(2, 5))    })    .catch(() => {    console.log('文件加载失败!');    })}

// 插件下载npm i workbox-webpack-plugin -D

/*  1. eslint不识别window/navigator全局变量    解决：需要修改package.json中eslintConfig配置    "env": {      "browser": true    }*/// 注册serviceWorker// 处理兼容性问题if ('serviceWorker' in navigator) {  window.addEventListener('load', () => {    navigator.serviceWorker.register('/service-worker.js')      .then(() => {        console.log('Sw注册成功');      })      .catch(() => {        console.log('Sw注册失败');      });  });}

"eslintConfig": {    "extends": "airbnb-base",    "env": {      "browser": true    }  }