webpack构建vue项目

发表于 | 分类于

Setup

1、安装webpack依赖

1
2
3
yarn add webpack webpack-cli -D
yarn add webpack-dev-server -D
yarn add html-webpack-plugin -D

2、安装babel依赖

1
2
3
4
5
6
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文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

4、安装自动化辅助

1
2
3
yarn add copy-webpack-plugin -D
yarn add clean-webpack-plugin -D
yarn add html-webpack-plugin -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 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

1
yarn add style-loader css-loader -D
1
2
3
4
5
6
module:{
  rules:[{
    test:/\.css$/,
    use:['style-loader','css-loader']
  }]
}

6、安装预编器sass

1
yarn add sass-loader sass -D
1
2
3
4
5
6
7
8
{
  test: /\.scss$/,
  use: [
    'style-loader'
    'css-loader',
    'sass-loader'
  ]
}

7、抽取css

1
yarn add mini-css-extract-plugin -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

1
yarn add postcss postcss-loader postcss-preset-env -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  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文件

1
2
yarn add vue-loader vue-template-compiler vue-style-loader -D
yarn add vue -S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 可以每次保存的时候校验代码

You can support me