webpack浅应用

创建项目

npm init

安装webpack

yarn add webpack@4.46.0 webpack-cli --dev

体验

新建 src/index.js, 写入部分内容

console.log(123)

package.json添加

"scripts": {
    "build":"webpack"
},

执行yarn build

生产和开发模式

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
}

指定入口和出口文件

入口文件默认为 src/index.js 出口文件默认dist/main.js

"scripts": {
    "dev": "webpack  ./src/js/index.js --output-path ./foo",
    "build": "webpack ./src/js/index.js --output-path ./foo"
}

babel + React

为了更好的演示后面的内容,先提前安装babel和react

yarn add @babel/core @babel/cli @babel/preset-react babel-loader react react-dom --dev

新建webpack.config.js

module.exports = {
    entry: "./src/index.js",
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: ["babel-loader"],
                exclude: /node_modules/,
            },
        ],
    }
};

新建babel.config.js

module.exports = {
    presets: ["@babel/preset-react"],
};

处理css

yarn add style-loader@0.23.1 css-loader@3.0.0 --dev

webpack.config.js

module.exports = {
    entry:'./src/index.js',
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

css 抽离

yarn add mini-css-extract-plugin@0.7.0 --dev

style-loader与MiniCssExtractPlugin.loader同时使用是冲突的，这其实很好理解，一个是以style标签的方式插在页面head里，一个是以link引用的方式抽离成一个单独的样式文件,这是个单选题。一般是开发时候选前者，生产环境选后者。

区分环境

"scripts": {
    "dev": "webpack serve --node-env development",
    "build": "webpack --node-env production"
},

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProd = process.env.NODE_ENV === 'production';

module.exports = {
    entry: "./src/index.js",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    isProd ? MiniCssExtractPlugin.loader : "style-loader",
                    "css-loader",
                ],
            },
            {
                test: /\.jsx?$/,
                use: ["babel-loader"],
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [
        // css文件单独抽离
        isProd &&
            new MiniCssExtractPlugin({
                filename: "css/[name]_[contenthash:8].css",
            }),
    ],
};

清除上次构建产物

yarn add clean-webpack-plugin --dev

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //清除dist

plugins: [
    new CleanWebpackPlugin(),
],

静态资源自动插入html模版

yarn add html-webpack-plugin@3.2.0 --dev

const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const path = require("path");

 plugins: [
    new CleanWebpackPlugin(),
    // css文件单独抽离
    isProd &&
        new MiniCssExtractPlugin({
            filename: "css/[name]_[contenthash:8].css",
        }),
    new HtmlWebpackPlugin({
        //配置
        filename: "index.html", //输出文件名
        template: path.resolve(__dirname, `./src/index.html`),
    }),
],

webpack-dev-server

yarn add  webpack-dev-server --dev

devServer: {
    static: {
        directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 9000,
},

package.json

"scripts": {
    "start": "webpack-dev-server",
    "dev": "webpack serve --node-env development",
    "build": "webpack --node-env production",
},