webpack的基本配置

1. 初始化项目 npm init

2. 创建各类需要打包的文件，**html、css、js **等

3. 创建 webpack.config.js 配置文件，其中有5大基本配置

   1. entry 入口文件，一般会引用 node 模块中的 path 来查找文件的路径，当需要配置多入口文件时，entry 需要以对象的形式存在，每一个入口名对应为一个 chunks 口，当模块需要使用不同的入口文件时需对应 chunks 。

      entry: {
              main: ["@babel/polyfill", path.resolve(__dirname, ‘../src/index.js‘)],    // 入口文件
              hearder: path.resolve(__dirname,‘../src/hearder.js‘)
      }
      plugins:[
            new HtmlWebpackPlugin({
              template:path.resolve(__dirname,‘../public/index.html‘),
              filename:‘dist-index.html‘,
              chunks:[‘main‘] // 与入口文件对应的模块名
            }),
            new HtmlWebpackPlugin({
              template:path.resolve(__dirname,‘../public/hearder.html‘),
              filename:‘hearder.html‘,
              chunks:[‘hearder‘] // 与入口文件对应的模块名
            })
      ]
      

   2. 出口文件 output

      output: {
        filename: ‘build.js‘,  // 可以自定义打包后的文件名
        path: Path.resolve(__dirname, ‘./dist‘)  // 打包后的文件输出位置
      }
      

   3. Module 打包配置

      • 解析 html 文档时，需要使用 html-loader 加载器，并且这个加载器使用的规范是 es6 规范，而 webpack 使用的是 CMD，所以需要在配置中关闭 es6 规范。否则会出错。

      • 解析 CSS 资源时，需要引入相应的加载器解析。

      • 解析 CSS 资源中的图片时，需要用到 url-loader 加载器，url-loader 加载器依赖于 file-loader 加载器。

        module: {
          rules: [
            // 解析 html 文档
            {
              test: /\.html$/,
              loader: ‘html-loader‘,
              options: {
                esModule: false  // 关闭es6模块化规范
              }
            },
            // 解析 sass 样式
            {
              test: /\.s[ac]ss$/,
              use: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘] // 从右向左顺序解析
            },
            // 解析图片资源
            {
              test: /\.(png|svg|jpg|gif)$/,
              loader: ‘url-loader‘,
              options: {
                limit: 4 * 1024,
                esModule: false,
                name: ‘image/[hash:10].[ext]‘ // 对打包后的图片资源改名并存放于新建的image文件夹下
              }
            }
          ]
        }
        

   4. mode 开发模式

      mode: ‘development‘ // 开发模式
      mode: ‘production‘  // 生产模式
      

   5. 插件 Plugin 以数组形式存在，用到的插件需要在此配置下新建实例

      plugins: [
        new HtmlWebpackPlugin({
          template: Path.resolve(__dirname, ‘./src/index.html‘), 
          filename: ‘index_build.html‘
        })
      ]
      

webpack的基本配置