webpack自動化架構入門

時間 2019-12-28

原文原文鏈接

前言

第一次打算學習自動化的時候是參照的一個老哥的文章，沒想到如今版本更新太快，那篇文章已經跑不起來了，因此我在這從新寫一篇最新版的搭建文章，懷念一下我老哥。css

webpack起步

一、初始化項目node

mkdir react-cli && cd react-cli
npm init -y

複製代碼

第一句：生成react-cli文件夾並進入react

第二句： -y 的含義：yes的意思，在init的時候省去了敲回車的步驟，生成的默認的package.jsonwebpack

二、安裝webpackes6

npm install webpack -D
複製代碼

第一句： -D 是 --save-dev 的簡寫，是指安裝模塊並保存到 package.json 的 devDependencies中，主要在開發環境中的依賴包. 若是使用webpack 4+ 版本，還須要安裝 webpack-cli。web

npm install -D webpack-cli
複製代碼

三、創建項目解構npm

react-cli
|--package.json
|--/dist
   |--index.html
|--/src
   |--index.js
複製代碼

index.htmljson

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
</body>
</html>
複製代碼

index.js瀏覽器

document.querySelector('#root').innerHTML = 'inke';
複製代碼

咱們就可使用webpack的打包功能了

node_modules/.bin/webpack src/index.js --output dist/bundle.js --mode development
複製代碼

執行出入口配置都在命令中。

執行成功以後會發現dist文件夾下會多出一個main.js,這時能夠打開dist目錄下的html文件，能夠看到文本inke。

配置webpack

一、配置文件。

根目錄下創建webpack.config.js

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};
複製代碼

走config配置以後再進行打包命令，這時會缺乏出入口的配置。以下

node_modules/.bin/webpack --mode production
複製代碼

同樣是dist文件夾中生成main.js，打開index.html看到文本inke

二、配置script腳本

package.json 添加一個 npm 腳本

"scripts": {
    "build": "webpack --mode production"
},
複製代碼

運行，便可進行打包

npm run build
複製代碼

構建本地服務器

webpack-dev-server 提供了一個簡單的 web 服務器，而且可以實時從新加載。

一、安裝 webpack-dev-server

npm install -D webpack-dev-server
複製代碼

新增webpack配置。

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 新增
    devServer: {
        contentBase: "./dist", // 本地服務器所加載的頁面所在的目錄
        historyApiFallback: true, // 不跳轉
        inline: true, // 實時刷新
        port: 3000, // 啓用端口
        open: true, // 自動打開瀏覽器
    }
};
複製代碼

與打包同樣，配置NPM scripts腳本

"start": "webpack-dev-server --open --mode development"
複製代碼

執行

npm run start
複製代碼

便可看到本地啓動了3000端口，訪問

http://localhost:3000/
複製代碼

咱們又再次看到了inke文本。

啓動webpack-dev-server後，在目標文件夾中是看不到編譯後的文件的,實時編譯後的文件都保存到了內存當中。所以使用webpack-dev-server進行開發的時候都看不到編譯後的文件

二、啓用熱更新

先來科普一下定義,關於 WDS 熱更新，有如下幾點：

（1）WDS 不刷新整個頁面;
（2）WDS 不輸出文件，而放在內存中(沒有磁盤IO，速度更快);
（3）使用 HotModuleReplacementPlugin 插件(webpack自帶);
複製代碼

配置一個webpack自帶的插件而且還要在主要js文件裏檢查是否有module.hot

webpack.config.js

const path = require('path');
// 新增
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: "./dist", // 本地服務器所加載的頁面所在的目錄
        historyApiFallback: true, // 不跳轉
        inline: true, // 實時刷新
        port: 3000,
        open: true, // 自動打開瀏覽器
        hot: true // 開啓熱更新-新增
    },
    // 新增
    plugins:[
        //熱更新
        new webpack.HotModuleReplacementPlugin()
    ],
};

複製代碼

src/index.js

document.querySelector('#root').innerHTML = 'inke';

if (module.hot){
    //實現熱更新
    module.hot.accept();
}
複製代碼

熱更新容許在運行時更新各類模塊，而無需進行徹底刷新

重啓一下項目，看一下效果。動態修改inke文本，便可進行熱更新。

配置HTML模版

科普，爲何要用HTML模板

The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates, or use your own loader.

一、安裝html-webpack-plugin

npm install -D html-webpack-plugin
複製代碼

添加webpack配置

webpack.config.js

...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        // 添加hash能夠防止文件緩存,每次都會生成4位hash串
        filename: 'main.[hash:4].js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        ...
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        // 新增
        new HtmlWebpackPlugin({
            template: './src/index.html',
            hash: true, // 會在打包好的bundle.js後面加上hash串
        })
    ],
};

複製代碼

咱們把dist文件夾中的index.html移動到src中，當成模板使用。

清空dist，咱們從新打包試試看

這裏對index.html是模板生成的，剛纔配置的hash已經配置上去了。

若是你進行改動，每次的hash值是不同的，這樣會有一個問題。dist文件中 main.js文件會愈來愈多。因此咱們須要一個打包以前清空dist文件夾的一個Plugins.

二、安裝 clean-webpack-plugin

npm install -D clean-webpack-plugin
複製代碼

配置webpack

webpack.config.js

...
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        // 添加hash能夠防止文件緩存,每次都會生成4位hash串
        filename: 'main.[hash:4].js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        ...
    },
    plugins:[
        ...
        new CleanWebpackPlugin()
    ],
};

複製代碼

這樣的話每次打包就不會多出文件了。

編譯es6

這裏咱們採用babel8的配置。

大概的配置是這個樣子

webpack 3.x | babel-loader 8.x | babel 7.x
複製代碼

咱們來具體安裝

npm install -D babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env
複製代碼

webpack.config.js

...

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.[hash:4].js',
        path: path.resolve(__dirname, 'dist')
    },
    // 新增babel-loader解析。
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    ...
};

複製代碼

重啓一下項目，咱們在src/index中試着寫一些es6語法。你會發現，會正常進行編譯。

配置react、jsx

安裝react 及 react-dom

npm install -D react react-dom
複製代碼

安裝相應babel

npm install -D @babel/preset-react
複製代碼

根目錄下建立.babelrc配置文件

.babelrc

{
    "presets": ["@babel/preset-react"]
}
複製代碼

這樣咱們就能夠引用react而且正常編譯了。

修改一下咱們的業務代碼

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
    document.querySelector('#root')
);

if (module.hot){
    //實現熱更新
    module.hot.accept();
}
複製代碼

src/App.js

import React from 'react';

class App extends React.Component{
    render() {
        return (
            <div>inke</div>
        );
    }
}
export default App;

複製代碼

重啓一下項目，咱們會發現，項目正常運行，解析成功。

配置css、less

這裏想一個問題，若是react直接

import './App.css';

class App extends React.Component{
    render() {
        return (
            <div className="root">inke</div>
        );
    }
}
export default App;

複製代碼

這樣會有什麼問題？

由於jsx的語法去掉後react組件是這個樣子的。

className是js語法，若是咱們直接引入css是沒法直接進行裝飾的。

一、安裝css 相應loader

npm install -D css-loader style-loader url-loader
複製代碼

分別爲，css解析，style-loader 的做用是把轉碼後的css文件插入到相應的文件中去，樣式內url地址解析。

修改webpack配置

module: {
    rules: [
        ...,
        {
            test:/\.(png|jpg|gif)$/,
            use:[
                "url-loader"
            ]
        },
        {
            test: /\.css$/,
            exclude: /node_modules/,
            use: [
                "style-loader",
                "css-loader"
            ]
        }
    ]
},
複製代碼

這裏注意一點

loader的加載順序是從右往左。這裏的編譯順序是先用css-loader將css代碼編譯，再交給style-loader插入到網頁裏面去。因此css-loader在右，style-loader在左。

而後咱們啓動項目，再引入一下css文件，就可使用樣式了。

接下來解析less

二、安裝less-loader

npm install -D less-loader
複製代碼

修改webpack配置

module: {
    rules: [
        ...,
        {
            test:/\.less$/,
            use:[
                "css-loader",
                "style-loader",
                "less-loader",
            ]
        }
    ]
},
複製代碼