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
        })
 ],复制代码