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

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接口文档： www.webpackjs.com/api/node/

在入口编写一点内容

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

---

相关连接

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

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

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

源码github仓库： github.com/tanf1995/We…