Webpack

***下载包

npm i webpack-cil -g   安装到全局 
npm i webpack-cil -d   安装到开发依赖

*** 开发环境打包

webpack 入口打包的文件路径  -o  输出到的文件路径 --mode=development
//整体打包文件是  开发环境 

*** 生产环境打包

webpack 入口打包的文件路径 -o   输出到的文件路径 --mode=production

*** webpack配置

module.exports = {
    //webpack 配置
    //入口起点
    entry: '入口文件的路径',
    //输出
    output: {
        //输出文件名
        folename: '输出的文件名',
        // 输出路径
        path: resolve(__dirname, '文件路径')
    },
    // loader 的配置
    module: {
        rules: [
            //详细的 loader 配置
            {
              //匹配哪些文件
              test:/\.css$/,
              // 使用哪些loader进行处理
              use:[
                  //创建style标签，将js中的样式资源插入进行，添加到head中生效
                 'style-loader',
                 //将css文件变成 commonjs模块加载js中，里面内容是样式字符串  
                 'css-loader'
              ]
            }
        ]
    },
    // plugins 的配置
    plugins: [
        //详细的plugins配置
    ],
    //模式
    mode: 'development',//开发模式
    // mode:'production'

}

*** 自动打包命令

启动devServer指令为：npx webpack-dev-server

*** devServer配置

devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
  }

*** 开发环境配置

• 开发环境配置

  /*
    开发环境配置：能让代码运行
      运行项目指令：
        webpack 会将打包结果输出出去
        npx webpack-dev-server 只会在内存中编译打包，没有输出
  */
  
  const { resolve } = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    entry: './src/js/index.js',
    output: {
      filename: 'js/built.js',
      path: resolve(__dirname, 'build')
    },
    module: {
      rules: [
        // loader的配置
        {
          // 处理less资源
          test: /\.less$/,
          use: ['style-loader', 'css-loader', 'less-loader']
        },
        {
          // 处理css资源
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          // 处理图片资源
          test: /\.(jpg|png|gif)$/,
          loader: 'url-loader',
          options: {
            limit: 8 * 1024,
            name: '[hash:10].[ext]',
            // 关闭es6模块化
            esModule: false,
            outputPath: 'imgs'
          }
        },
        {
          // 处理html中img资源
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          // 处理其他资源
          exclude: /\.(html|js|css|less|jpg|png|gif)/,
          loader: 'file-loader',
          options: {
            name: '[hash:10].[ext]',
            outputPath: 'media'
          }
        }
      ]
    },
    plugins: [
      // plugins的配置
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
    ],
    mode: 'development',
    devServer: {
      contentBase: resolve(__dirname, 'build'),
      compress: true,
      port: 3000,
      open: true
    }
  };