webpack构建vue项目

Setup

1、安装webpack依赖

yarn add webpack webpack-cli -D
yarn add webpack-dev-server -D
yarn add html-webpack-plugin -D

2、安装babel依赖

yarn add babel-loader @babel/core -D
# 为了转化es6代码，需要安装babel插件
yarn add @babel/preset-env @babel/polyfill -D
# 安装防止全局污染babel插件
yarn add -D @babel/plugin-transform-runtime
yarn add @babel/runtime @babel/runtime-corejs2

3、创建.babelrc文件

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

4、安装自动化辅助

yarn add copy-webpack-plugin -D
yarn add clean-webpack-plugin -D
yarn add html-webpack-plugin -D

 plugins: [
  new htmlWebpackPlugin({
    filename: "index.html",
    template: resolve("../examples/public/index.html"),
  }),
  new CleanWebpackPlugin(),
  new copyWebpackPlugin({
    patterns: [
      {
        from: resolve("../examples/public"),
        to: resolve("../dist"),
      },
    ],
  }),
],

5、解析css

yarn add style-loader css-loader -D

module:{
  rules:[{
    test:/\.css$/,
    use:['style-loader','css-loader']
  }]
}

6、安装预编器sass

yarn add sass-loader sass -D

{
  test: /\.scss$/,
  use: [
    'style-loader'
    'css-loader',
    'sass-loader'
  ]
}

7、抽取css

yarn add mini-css-extract-plugin -D

module:{
  rules:[
    {
      test: /\.scss$/,
      use: [
        miniCssExtractPlugin.loader,
        "css-loader",
        "sass-loader",
      ],
    }
  ]
}
plugins:[
  new MiniCssExtractPlugin({
    filename: "css/[name].[hash:8].css",
    chunkFilename: "css/[id].css",
  })
]

8、兼容css

yarn add postcss postcss-loader postcss-preset-env -D

{
  test: /\.scss$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    "sass-loader",
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            [
              "postcss-preset-env",
              { browsers: ['last 2 versions', 'ie 8', '>1%'] }
            ]
          ]
        }
      }
    }
  ]
}

9、识别vue文件

yarn add vue-loader vue-template-compiler vue-style-loader -D
yarn add vue -S

rules:[
  {
    test: /\.vue$/,
    use: ["vue-loader"],
  },
],
resolve:{
  alias: {
    vue$: "vue/dist/vue.runtime.esm.js",
    "@": resolve("../src"),
    "@examples": resolve("../examples"),
  },
 	extensions: [".js", ".vue"],
},
plugins:[
  new vueLoaderPlugin()
]

配置eslint

eslant-loader 可以每次保存的时候校验代码