安装

1.cnpm i webpack webpack-cli

2.模块局部安装会在node_modules/.bin/webpack目录创建软链接

基础

---

entry

依赖入口

// 单入口，SPA

entry: 'xx/xx.js'

// 多入口，MPA

entry: {

    app: './src/app.js',

    adminApp: './src/adminApp.js'

}

output

指定打包后的输出

output: {

    filename: '[name].js',

    path: path.resolve(__dirname,'dist') // 单入口可以写死文件名，多入口一定要使用占位符[name]，来自动生成多个文件

}

Mode

有开发(development)和生产(production)模式

Plugins

Loaders

webpack开箱即用只支持JS和JSON两种文件类型，通过Loader去支持其他文件类型并把他们转化为有效的模块，并且可以添加到依赖图中。

本身是一个函数，接受源文件作为参数，返回转化的结果。

例如： babel/ts-loader、css/less/scss-loader、url/file-loader、raw-loader(将.txt文件以字符串的形式导入)、thread-loader(多进程打包js和css)

module: {

    rules: [

        { test: /.txt$/,use: 'raw-loader' },

        { test: /.css$/,use: [

            loader: 'css-loader',

            options: {

                modules: {

                    localIdentName: '[path][name]__[hash:base64:5]'

                }

            }

        ]}

    ]

}

解析ES6

1.使用babel-loader、babel的配置文件.babelrc

2.安装babel-loader、@babel/core@babel/preset-env

// webpack.config.js

module: {

    rules: [

        { test: /.js?x$/, use: 'babel-loader', exclude: /node_modules/ }

    ]

}

// .babelrc

{

    "presets": [

        "@babel/preset-env",

        "@babel/preset-react"

    ],

    "plugins": [

        // 各种插件

        "@babel/propsoal-class-properties"

    ]

}

css/less/scss-loader

1.css-loader用于加载.css文件，并且转换成common对象

2.style-loader将样式通过style标签，插入到head中

// use: [ loader1,loader2,loader3 ] , loader的处理顺序是3>2>1 , 从后往前

module: {

    rules: [

        {

            test: /.s?css$/,

            use: [

                isDev ? 'style-loader' : MiniCssExtractPlugin.loader

                {

                    loader: 'css-loader',

                    options: {

                        importLoaders: 1,

                        // css模块化使用

                        modules: {

                            localIdentName: '[path][name]__[local]--[hash:base64:5]'

                        }

                    }

                },

                'postcss-loader'

            ]

        }

    ]

}

url/file-loader

1.用于处理文件、图片、字体、多媒体

2.url-loader实现较小的图片转成base64，插入到代码中，当超过限制的limit后，会自动降级到file-loader

{

    test: /\. (png|jpg|jpeg|gif|eot|woff|woff2|ttf|svg|otf) $/,

    use: [

        loader: 'url-loader',

        options: {

            limit: 10 * 1024, // 10k     

              name: isDev ? 'images/[name].[ext]' : 'images/[name].[hash.[ext]',     

              publicPath: idDev ? '/' : 'cdn地址',

        },

        // production , 用于图片压缩

        {

            loader: 'image-webpack-loader',

            options: {

                bypassOnDebug: true

            }

        }

    ]

}