Webpack 配置

webpack.config.js配置

几个参数

1. mode

设置当前代码的模式

mode: development/production

development 是开发者模式点击dist查看打包后的文件可以看到里面的代码都是有注释的

production是发布时使用的模式，为了体积小，打包后的代码是没有注释的。

开发的时候使用mode:development，发布的时候使用mode:production模式。

2. entry

指定程序入口文件

3. output

指定打包到的文件位置以及文件名等

webpack打包各种类型文件

转译js文件

webpack.config.js文件中设置入口js文件和出口文件名。

module.exports = {
	mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js' 
    }
};

[contenthash]用于生成hash值。当设置了HTTP请求中的cache-control字段后，浏览器就会将文件缓存再硬盘中，当浏览器下次加载页面的时候就会从硬盘中读取。如果哈希值发生改变就会重新到网络中加载对应的文件。这样做的好处就是提高重复加载资源的速率。

主页面是不需要被存储的，因为需要加载主页面来查看引用的资源的哈希值是否发生变化。如果主页面都被缓存了那么每次加载的资源就都是相同的。

转译html文件

安装 html-webpack-plugin 插件

yarn add --save-dev html-webpack-plugin

webpack.config.js

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            title: "sitename", //设置网页的title标签
            filename: 'index.html', //指定文件名
            template: 'src/assets/test.html' //使用目录中的html文件
        })
    ],

};

转译css

css-loader

安装两个loader

yarn add --save-dev css-loader
yarn add --save-dev style-loader

配置webpack.config.js

module.exports = {
    module: {
        rules: [{
            test: /\.css$/i,
			use:["css-loader","style-loader"]
        }]
    },
};

xxx.js

import xxx.css

会在html文件中生成style标签

mini-css-extract-plugin

如果想要在HTML生成link标签需要下载mini-css-extract-plugin插件

npm install --save-dev mini-css-extract-plugin

具体如何配置自行搜索 mini-css-extract-plugin

配置完成后打包运行 得到引入的link文件

使用webpack-dev-server

webpack-dev-server可以用来实时的预览代码，当文件保存浏览器就会自动刷新。

webpack-dev-server每次刷新会在内存中将文件进行打包，而不是build到dist目录中。总而言之webpack-dev-server是比较快的。

具体配置执行查看webpack官网.

将webpack.config.js文件分解

我们在开发的时候，和发布的时候使用的webpack.config.js的文件内容是不同的。可以将webpack.config.js分为三个文件来处理。

webpack.config.base.js 基本的webpack配置

将webpack.config.js中不论开发还是打包都需要用到的文件放到这里。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "Ying",
            filename: 'index.html',
            template: 'src/assets/test.html'
        })
    ],

};

webpack.config.prod.js 发布的webpack配置

同样的将发布时需要的配置放到这样文件中，并引入base文件。 例如mode:production模式

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const base = require('./webpack.config.base.js');
module.exports = {
    ...base,
    mode: 'production',

    plugins: [
        ...base.plugins,
        new MiniCssExtractPlugin({ // 生成link引入
            filename: '[name].[contenthash].css',
            chunkFilename: '[id].[contenthash].css',
        }),
    ],
    module: {
        rules: [{
            test: /\.css$/i,
            use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '/public/path/to/',
                    },
                },
                'css-loader',
            ]
        }]
    },
};

webpack.config.js 默认开发配置

const path = require('path');
const base = require('./webpack.config.base.js');
module.exports = {
    ...base,
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
    },

    module: {
        rules: [{
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'], //生成style标签
        }]
    },
};

package.json

  "scripts": {
      + "start": "webpack-dev-server --open", 
      + "build": "rm -rf dist && webpack --config webpack.config.prod.js",
        "test": "echo \"Error: no test specified\" && exit 1"
    },

总结

webpack的配置还是需要依据最新的官方文档为标准。

转译某类型文件都是需要使用起类型的loader的。拓展:loader和plugin的区别

学习webpack不在于把文档通读一遍，而是你在需要完成某个功能的时候去对应的搜索方法。