webpack安装

1.npm init -y 好像是默认配置文件
2.npm install webpack webpack-cli --save-dev 本地安装webpack依赖
3.npx webpack --version 查看webpack 是否局部安装成功
4.npm webpack -v 查看webpack安装版本
5.webpack.config.js 创建webpack 配置文件
6.配置文本信息

// webpack.config.js

// webpack 工具使用node编写
// webpack 的运行在node环境下
// 支持所有的node 模块 
// 语法：common.js

// 下面用到什么模块就在上面引入
const path = require('path');

module.exports = {
  mode: 'development',//开发模式
  // 入口文件：告诉webpack 要打包是什么文件
  entry: './src/index.js',
  // 出口文件：告诉webpack 打包后的文件放在哪里
  output: {
    path: path.resolve(__dirname, 'wlj'),// 配置打包文件放在哪里  dist打包后的文件夹
    filename: 'blc.js'   // 打包后生成的文件名
  },
  // source-map，调试用的，出错的时候，将直接定位到原始代码，而不是转换后的代码
  devtool: 'cheap-module-eval-source-map',
  resolve: {
    // 自动补全（可以省略）的扩展名
    extensions: ['.js'],
    // 路径别名
    alias: {
      api: resolve('src/api'),
      icons: resolve('src/assets/icons'),
      styles: resolve('src/assets/styles'),
      components: resolve('src/components'),
      pages: resolve('src/pages'),
      utils: resolve('src/utils')
    }
  },
  // 不同类型模块的处理规则
  module: {
    rules: [
      // css
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 模板文件
      {
        test: /\.art$/,
        loader: 'art-template-loader'
      },
      // 图片 当然图片格式不止下面这些
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        loader: 'url-loader',
        options: {
          // 小于 10K 的图片转成 base64 编码的 dataURL 字符串写到代码中
          limit: 10000,
          // 其他的图片转移到
          name: 'images/[name].[ext]',
          esModule: false
        }
      },
      // 字体文件
      {
        test: /\.(woff2?|eot|ttf|otf)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    // 自动将依赖注入 html 模板，并输出最终的 html 文件到目标文件夹
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/pages/index/index.art',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      filename: 'destination.html',
      template: './src/pages/destination/destination.art',
      chunks: ['destination']
    })
  ]
};
};

7.npx webpack --config webpack.config.js 将ES6文件编译成ES5
8.npm run zy 将webpack.config.js 文件中"scripts"中对象属性 变为"zy": “webpack --config webpack.config.js” （省事）// zy是随意取的