Webpack4 最最最經常使用的配置（面向萌新）

本文是篇api文檔，即方便你們複製粘貼，迅速配置項目。不細講原理，總結列出經常使用的Loader,Plugins，便於萌新迅速根據代碼中須要的loader與plugins， npm install相關依賴直接完成配置

Loader 與 Plugins

• 遇到引入的模塊不是.js，找Loader。
• 遇到須要在編譯完成，或編譯前等不一樣時期處理些事，找Plugins（如：HtmlWebpackPlugin）

上代碼

CSS

yarn add style-loader css-loader postcss-loader node-sass sass-loader --dev複製代碼

{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
  },複製代碼

JS

方案一 本身項目

yarn add babel-loader @babel/core @babel/polyfill @babel/preset-env --dev複製代碼

// webpack.config.js
{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
}複製代碼

// .babelrc
{
'presets': [
    	['@babel/preset-env', {
    		'targets': {
    			'chrome': '58',
    			'ie': '11'
    		},
    		useBuiltIns: 'usage'
    	}]
    ]
}複製代碼

方案二 插件

yarn add babel-loader @babel/core @babel/runtime  @babel/runtime-corejs2 @babel/plugin-transform-runtime  --dev複製代碼

// webpack.config.js
{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
}複製代碼

// .babelrc
{
    "plugins": [
        [
          "@babel/plugin-transform-runtime",
          {
            "absoluteRuntime": false,
            "corejs": 2,
            "helpers": true,
            "regenerator": true,
            "useESModules": false
          }
        ]
      ]
}複製代碼

圖片

{
            test: /\.(png|jpg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
   },複製代碼

字體

{
            test: /\.(eot|ttf|svg)$/,
            use: {
                loader: 'file-loader'
            }
 },複製代碼

別名等

resolve: {
        alias: {
          Api: path.resolve(__dirname, '../src/api/'),
          Widget: path.resolve(__dirname, '../src/widget/'),
          hostname:path.resolve(__dirname, `../env/${_env}.js`),
        },
        extensions: ['.css', '.scss', '.js', '.pug','.json']
 },複製代碼

經常使用插件

plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        }), 
        new CleanWebpackPlugin({
            // cleanOnceBeforeBuildPatterns:[path.resolve(__dirname,'dist')], 兩種清理方式均可以
            cleanStaleWebpackAssets: true
        })
 ],複製代碼