乐趣区

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

jiezi

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

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 命令，生成打包目录

运行生成的 `bundle.js`

配置开发服务器 – 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');
        })

运行命令 yarn start, 浏览器自动弹出窗口，访问 localhost:3000/bundle.js

未完待续！

退出移动版