重学webpack

webpack安装

  • 安装webpack
  • 安装webpack-cli

webpack可以进行0配置

  • 新建src文件下，创建index.js文件
  • 执行npx webpack
  • 指定配置文件 webpack –config webpack.config.js

基础配置

  • entry

    1
    2
    3
    4
    5
    6
    7
    1. 单页应用
        entry: './src/index.js' 
    2. 多页应用
        entry: {
            index: './src/index.js',
            main: './src/main.js'
        }

  • output

    1
    2
    3
    4
    5
    output: {
        filename: '[name].[hash:8].js',
        path: path.resolve(__dirname, 'build'),
        publicPath: 'http://www.baidu.com'
    },

  • mode

    1
    mode: 'development', // development or production

  • module

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    module: {
        /* 不去解析jquery和loadsh文件的依赖 */
        noParse: /jquery|lodash/, 
        rules: [{
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                        presets: [
                        '@babel/preset-env',
                        '@babel/preset-react'
                    ],
                    plugins: [
                        /* 支持class 以及 修饰器 */
                        ["@babel/plugin-proposal-decorators", { "legacy": true }],
                        ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                        "@babel/plugin-transform-runtime"
                    ]
                }
            }
        }]
    }

  • resolve

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    resolve: { 
        /* 第三方包寻找地址 */
        modules: [path.resolve('node_modules')],
        /* 别名 */
        alias: {
            bootstrap: 'bootstrap/dist/css/bootstrap.css'
        },
        /* 第三方包引入的时候优先查找package.json下的哪个文件 */
        mainFields: ['style', 'main'],
        /* 入口文件的名字 */
        mainFiles: [],
        /* 扩展名，依次查找 */
        extensions: ['.js', '.css', '.json'],
    },

  • plugins

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    一些常用的插件
    1. html-webpack-plugin
    2. mini-css-extract-plugin
    3. clean-webpack-plugin
    4. copy-webpack-plugin
    5. webpack.DefinePlugin
    6. webpack.BannerPlugin
    7. webpack.IgnorePlugin

    plugins: [
        new webpack.DefinePlugin({
            DEV: JSON.stringify('dev')
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            hash: true,
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
            },
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'main.html',
            hash: true,
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
            },
            chunks: ['main']
        }),
        new MiniCssExtractPlugin({
            filename: 'css/main.css'
        }),
        // new webpack.ProvidePlugin({ //在每个模块中注入$
        //     $: 'jquery'
        // }),
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin([{
            from: 'doc',
            to: './doc'
        }]),
        new webpack.BannerPlugin('make 2019 by fanxing'),
        new webpack.IgnorePlugin(/\.\/local/, /moment/)
    ],

  • devServer

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     devServer: {
        port: 3000,
        progress: true,
        contentBase: './build',
        compress: true,
        // proxy: {
        //     '/api': {
        //         target: 'http://localhost:3001',
        //         pathRewrite: {'/api': ''}
        //     }
        // },
        // before(app){
        //     app.get('/api/user', (req, res)=>{
        //         res.json({name: 'fanxing'})
        //     })
        // }
    },

  • watch && watchOption

    1
    2
    3
    4
    5
    6
    7
    8
    9
    watch: false,
    watchOptions: {
        /* 询问频率 一秒询问1000次 */
        poll: 1000,
        /* 防抖 */
        aggregateTimeout: 500,
        /* 忽略监听 */
        ignored: /node_modules/
    },

  • externals 

    1
    2
    3
    4
    externals: {
        //使用CDN后 依然像写 import $ from 'jquery' 写法
        jquery: "$"
    },

  • optimization

    1
    2
    3
    4
    5
    6
    7
    8
     optimization: {
        //使用 optimize-css-assets-webpack-plugin 压缩css后，js也必须使用 uglifyjs-webpack-plugin 来压缩
        minimizer: [
            //new uglifyjs(),
            new TerserJSPlugin({}),
            //new OptimizeCSSAssetsPlugin({})
        ]
    }