webpack4详细教程，从无到有搭建react脚手架（一）

kalinux

2019-11-09

关注关注

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师（切图仔），非常有必要学习。

webpack4详细教程，从无到有搭建react脚手架（一）

webpack官网的文档非常的棒，中文文档也非常给力，可以媲美vue的文档。建议先看概念篇章，再看指南，然后看API和配置总览。看完指南教程后，需要自主动手练习才能更加有影响，这里记录下我搭建react开发环境的过程

准备工作

安装webpack

yarn add webpack webpack-cli -D

创建配置目录结构

config
    webpack.common.js
    webpack.dev.js
    webpack.prod.js

scripts
    build.js  // 构建模式脚本
    start.js  // 开发模式脚本

src
    index.js

package.json

先尝试一个简单配置

配置启动脚本命令

package.json

...
"license": "MIT",
+ "scripts": {
+     "start": "node ./scripts/start.js",
+     "build": "node ./scripts/build.js"
+ },
"devDependencies": {
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.5"
}
...

编写webpack配置, 以 `src/index.js` 作为主入口，以 `build`为打包后的目录

config/webpack.common.js

output path字段这里配置的绝对路径

const path = require('path');

        module.exports = {
            entry: "./src/index.js",
            output: {
                path: path.resolve(__dirname, "../build"),
                filename: "bundle.js"
            }
        }

编写开发模式运行脚本

scripts/build.js

const webpack = require('webpack');
        const webpackConfig = require('../config/webpack.common.js');

        webpack(webpackConfig, (err, stats) => {
            if(err || stats.hasErrors()){
                console.log("编译失败");
            }
        });

webpack node接口文档： https://www.webpackjs.com/api...

在入口编写一点内容

src/index.js

console.log('hello')

执行 `yarn build` 命令，生成打包目录

webpack4详细教程，从无到有搭建react脚手架（一）

运行生成的 `bundle.js`

webpack4详细教程，从无到有搭建react脚手架（一）

配置开发服务器 - webpack-dev-server

安装dev服务器和合并配置工具

yarn add webpack-dev-server webpack-merge -D

改写webpack配置文件, common文件导出一个可传参数的基本配置生成器, prod和dev文件使用webpack-merge将通用配置和各自模式下的配置进行合并导出

config/webpack.common.js

const path = require('path');

        function webpackCommonConfigCreator(options){
            /**
            * options: 
            *      mode // 开发模式
            */

            return {
                mode: options.mode,
                entry: "./src/index.js",
                output: {
                    filename: "bundle.js",
                    path: path.resolve(__dirname, "../build"),
                }
            }
        }

        module.exports = webpackCommonConfigCreator;

config/webpack.prod.js

const webpackConfigCreator = require('./webpack.common');
        const merge = require('webpack-merge');

        const config = {

        }

        const options = {
            mode: "production"
        }

        module.exports = merge(webpackConfigCreator(options), config);

config/webpack.dev.js

const webpackConfigCreator = require('./webpack.common');
        const merge = require('webpack-merge');

        const config = {

        }

        const options = {
            mode: "development"
        }

        module.exports = merge(webpackConfigCreator(options), config);

script/build.js

const webpack = require('webpack');
        const webpackConfig = require('../config/webpack.prod.js');

        webpack(webpackConfig, (err, stats) => {
            if(err || stats.hasErrors()){
                console.log("编译失败");
            }
        });

yarn build 打包，输出正常

配置 webpack-dev-server

config/webpack.dev.js

这里的contentBase选项是server模式下的output，开启server后，webpack会实时编译代码到内存

...
        + const path = require('path');

        const config = {
            + devServer: {
            +     contentBase: path.join(__dirname, "../dist")
            + }
        }
        ...

scripts/start.js

const webpack = require('webpack');
        const webpackDevServer = require('webpack-dev-server');
        const webpackConfig = require('../config/webpack.dev.js');

        const compiler = webpack(webpackConfig);
        const options = Object.assign({}, webpackConfig.devServer, {
            open: true
        })
        const server = new webpackDevServer(compiler, options);

        server.listen(3000, '127.0.0.1', () => {
            console.log('Starting server on http://localhost:8080');
        })