webpack4詳細教程，從無到有搭建react腳手架（一）

時間 2019-11-06

標籤 webpack4 webpack 詳細教程從無到有搭建 react 腳手架欄目 React 简体版

原文原文鏈接

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器，前端模塊化的基礎。做爲一個前端工程師（切圖仔），很是有必要學習。前端

webpack官網的文檔很是的棒，中文文檔也很是給力，能夠媲美vue的文檔。建議先看概念篇章，再看指南，而後看API和配置總覽。看完指南教程後，須要自主動手練習才能更加有影響，這裏記錄下我搭建react開發環境的過程vue

準備工做

安裝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.jsonnode

```
    ...
    "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.jsreact

output path字段這裏配置的絕對路徑webpack

const path = require('path');

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

編寫開發模式運行腳本

scripts/build.jsgit

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/github

在入口編寫一點內容

src/index.jsweb

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.jsjson

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.jsapi

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');
        })

複製代碼