webpack 配置从头到脚

2020-08-04  本文已影响0人  泉泉泉泉泉泉

下面是webpack.conf.prod.js 部分内容

const path = require("path");
const config = {
  mode: "production",
  resolve: webpackConfigResolve,
  stats: "minimal",
  entry: './app.js';
  output: {
    filename:'bundle.js',
  },
  module: {
    rules: webpackConfigmModuleRules,
  },
  optimization: {},
  plugins: [],
};

首先认识下webpack每项配置项

entry

待更

output

待更

module

待更

resolve

webpack 在启动后会从配置的入口模块出发找出所有依赖的模块，resolve配置 webpack 如何寻找模块所对应的文件。 webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你也可以根据自己的需要修改默认的规则。如下配置

const path = require('path');
function resolve(dir) {
  return path.join(__dirname, '..', dir);
}
module.exports = {
  extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.less', '.css'],
  mainFields: ['module', 'jsnext:main', 'main'],
  symlinks: false,
  alias: {
    '@': resolve('src'),
  },
};

 resolve:{
  alias:{
    components: './src/components/'
  }
}

当你通过import Button from 'components/button导入时，实际上被 alias 等价替换成了 import Button from './src/components/button' 。

以上 alias 配置的含义是把导入语句里的components关键字替换成./src/components/。

这样做可能会命中太多的导入语句，alias 还支持 $ 符号来缩小范围到只命中以关键字结尾的导入语句：

resolve:{
  alias:{
    'react$': '/path/to/react.min.js'
  }
}

react$只会命中以react结尾的导入语句，即只会把import 'react'关键字替换成import '/path/to/react.min.js'。

{
  "jsnext:main": "es/index.js",// 采用 ES6 语法的代码入口文件
  "main": "lib/index.js" // 采用 ES5 语法的代码入口文件
}

Webpack 会根据 mainFields 的配置去决定优先采用那份代码， mainFields 默认如下：

mainFields: ['browser', 'main']

Webpack 会按照数组里的顺序去 package.json 文件里寻找，只会使用找到的第一个
假如你想优先采用 ES6 的那份代码，可以这样配置：

mainFields: ['jsnext:main', 'browser', 'main']

extensions: ['.js', '.json']

也就是说当遇到require('./data')这样的导入语句时，Webpack 会先去寻找./data.js文件，如果该文件不存在就去寻找./data.json文件， 如果还是找不到就报错。

假如你想让 Webpack 优先使用目录下的 TypeScript 文件，可以这样配置：

extensions: ['.ts', '.js', '.json']

modules:['./src/components','node_modules']

后，你可以简单通过import 'button'导入。

descriptionFiles: ['package.json']

plugins

常用的plugins如下

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const cssnano = require("cssnano");
const TerserPlugin = require("terser-webpack-plugin");
const HappyPack = require("happypack");

const htmlPlugin = new HtmlWebpackPlugin({
    filename: `${entry}.html`,
    title: `${titles[entry]}`,
    template: path.resolve(__dirname, '../../src/index.js'),
    chunks: [
      'vendors.core',
      'vendors.commons',
    ],
    minify: HtmlWebpackPluginMinifyOptions,
  });

html-webpack-plugin插件详细用法参见：
https://www.jianshu.com/p/08a60756ffda

const webpack = require('webpack');
module.exports = {
  // ...
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer:{
    hot:true,
  }
}

也可以在页面中开启HMR，比如下面这个例子：

import { add } from 'util.js';
add(2,3);
if(module.hot){
  module.hot.accept();
}

热更新原理：
css-loader、vue-loader已经帮我们写了这部分代码，所以不需要手写了，但是如果是HTML，需要自己手动执行下面的代码

if (module.hot) {
  module.hot.accept('文件地址', () => {
    // 重新执行文件
  })
}

在webpack.conf.prod.js中引入：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: './app.js',
    output: {
        filename:'[name].js',
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath:'../',
                    },
                },
                'css-loader'
            ],
        }],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename:'[name].css',
        })
    ]
}

const ExtractTextplugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './app.js';
  output: {
    filename:'bundle.js',
  },
  mode:'development',
  module: {
    rules:[
      {
        test:/\.css$/,
        use:ExtractTextplugin.extract({
          fallback:'style-loader',
          use:'css-loader',
        })
      }
    ]
  },
  plugins:[
    new ExtractTextPlugin('bundle.css')
  ]
} 

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                }),
            }
        ],
    },
    plugins: [new ExtractTextPlugin('style.css')],
    optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({
            // 生效范围，只压缩匹配到的资源
            assetNameRegExp: /\.optimize\.css$/g,
            // 压缩处理器，默认为 cssnano
            cssProcessor: require('cssnano'),
            // 压缩处理器的配置
            cssProcessorOptions: { discardComments: { removeAll: true } },
            // 是否展示 log
            canPrint: true,
        })],
    },
};

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    //...
    optimization: {
        // 覆盖默认的 minimizer
        minimizer: [
            new TerserPlugin({
                /* your config */
                test: /\.js(\?.*)?$/i,
                exclude: /\/excludes/,
            })
        ],
    },
};

const Analyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  ...
  plugins: [
    new Analyzer()
    ],
}

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  ...
  plugins:[
        new CleanWebpackPlugin()
  ],
}

参考博客：
https://www.cnblogs.com/joyco773/p/9049760.html
https://www.jianshu.com/p/755aad97d810
https://www.jianshu.com/p/2df87e8f4d3e
https://www.jianshu.com/p/d08d5bc85ad2

上一篇 下一篇

猜你喜欢

热点阅读