webpack

1，webpack 命令

# webpack 打包文件
webpack index.js --output main.js

# 指定配置文件打包
webpack --config config.js

2，配置文件

• 单入口配置

  const path = require('path')
  
  module.exports = {
    entry: "./src/index.js",
    output:{
      path: path.resolve(__dirname, 'dist'),
      filename:'main.js',
    }
  }

• 多入口配置

  const path = require('path')
  
  module.exports = {
    entry: {
    	app1:"./src/index.js",
      app2:"./src/index2.js",
    },
    output:{
      path: path.resolve(__dirname, 'dist'),
      filename:'[name].main.js',
    }
  }

3，配置插件，以uglifyjs

• 安装插件

  npm install uglifyjs-webpack-plugin --save-dev

• 配置, 参考文档https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

  const path = require('path')
  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  
  module.exports = {
    entry: {
    	app1:"./src/index.js",
      app2:"./src/index2.js",
    },
    output:{
      path: path.resolve(__dirname, 'dist'),
      filename:'[name].main.js',
    },
    optimization: {
      minimizer: [new UglifyJsPlugin()],
    },
  }

4，配置loader加载器

• 安装依赖

  npm install --save-dev css-loader

• 配置文件, 参考文档https://webpack.js.org/loaders/css-loader/#getting-started

  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ['css-loader'],
        },
      ],
    },
  };