Webpack设置总结

初始化项目

npm init -y
npm install webpack webpack-cli --save-dev

创建 webpack.config.js

const path = require('path');

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

设置多入口多出口

entry用object形式传入，output不需要指定filename，配置完毕后在dist目录下会生成entry1.js和entry2.js

entry: {
    "entry1": "./src/entry1.js",
    "entry2": "./src/entry2.js"
},
output: {
    path: path.resolve(__dirname, './dist'),
},

安装babel

https://webpack.js.org/loaders/babel-loader/

npm install -D babel-loader @babel/core @babel/preset-env webpack

module.rules下设置

rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]

安装vue-loader

npm install vue css-loader --save

https://vue-loader.vuejs.org/zh/

参考

https://webpack.js.org/guides/getting-started/