webpack 項目實戰(zhàn) - ES6+AngularJS

本項目基于 webpack@3.0 版本

目錄

  • 安裝與基礎(chǔ)配置
  • 常用插件
  • 常用加載器
  • 優(yōu)化結(jié)構(gòu)與配置

安裝與基礎(chǔ)配置

1. 安裝 webpack

# 全局中安裝 - （需要使用 webpack 命令）
$ cnpm install -g webpack@3.*

# 項目中安裝
$ cnpm install --save-dev webpack@3.*

cnpm 為使用淘寶的鏡像。使用命令 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安裝～

2. 新建入口文件

// ./index.js
alert('Hello world!');

3. 新建配置文件

// ./webpack.config.js
module.exports = {

    // 入口文件
    entry: __dirname + '/index.js',

    // 開發(fā)模式記錄錯誤信息
    devtool: 'inline-source-map',

    // 輸出文件
    output: {
        path: __dirname + '/dist',
        filename: 'bundle-[hash].js'
    }

};

4. 運行測試

$ webpack

Hash: 7ac8e5097f8728f373f3
Version: webpack 3.10.0
Time: 83ms
                         Asset    Size  Chunks             Chunk Names
bundle-7ac8e5097f8728f373f3.js  2.5 kB       0  [emitted]  main
   [0] ./index.js 22 bytes {0} [built]

常用插件

1. 自動清理打包目錄的插件

$ cnpm install --save-dev clean-webpack-plugin

// ./webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    ...
    // 加載模塊
    plugins: [
        new CleanWebpackPlugin(['dist'])
    ]
};

2. 自動生成模板插件

$ cnpm install --save-dev html-webpack-plugin

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

module.exports = {
    ...
    // 加載模塊
    plugins: [
        ...
        new HtmlWebpackPlugin()
    ]
};

3. 新建入口默認模板

// ./index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
</head>
<body>
</body>
</html>

// ./webpack.config.js
new HtmlWebpackPlugin({
    filename: 'index.html',
    // 使用默認模版
    template: __dirname + '/index.html'
})

4. webpack 開發(fā)服務器

$ cnpm install --save-dev webpack-dev-server webpack-cli

// ./webpack.config.js
...
module.exports = {
    ...
    devServer: {
        // 服務器文件路徑
        contentBase: './dist',
        // 不跳轉(zhuǎn)url
        historyApiFallback: true,
        // inline模式url不用變化
        inline: ture,
        // 熱更新
        hot: true,
        // 開啟GZIP
        compress: true,
    }
    ...
}

// 增加 start 命令
// ./package.json
"scripts": {
    ...
    "start": "webpack-dev-server --open"
}

webpack4.0 之后依賴 webpack-cli。

5. 運行測試

$ npm start
// 瀏覽器彈出‘Hello world!’測試成功

6. 整理項目目錄

新建 app 文件夾，將index.js，index.html整理在里面，修改webpack.config.js:

// ./webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

    // 入口
    entry: __dirname + '/app/index.js',

    // 輸出
    output: {
        path: __dirname + '/dist',
        filename: 'bundle-[hash].js'
    },

    // server
    devServer: {
        contentBase: __dirname + '/dist',
    },

    // 插件
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            template: 'app/index.html'
        }),
    ]
};

常用加載器

1. 安裝樣式加載模塊

$ cnpm install --save-dev style-loader css-loader less-loader less

// ./webpack.config.js
module.exports = {

    ...

    // 模塊
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    // 順序是從最后一個開始解析
                    // less-loader => css-loader => style-loader
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' }
                ]
            }
        ]
    },

    ...
};

這里用到 less，如果用到其他的樣式處理，需要其他的安裝加載器。例如 sass-loader。

2. 將樣式文件打包為單個文件

$ cnpm install --save-dev extract-text-webpack-plugin

// ./webpack.config.js
...
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {

    ...
    // 模塊
    module: {
        rules: [
            {
                test: /\.less$/,
                // 打包為單獨文件
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            }
        ]
    },

    // 插件
    plugins: [
        ...
        new ExtractTextWebpackPlugin('style.css')
    ]
};

3. 安裝文件加載器

一般樣式文件與 js 中引入的一些圖片與字體文件等需要文件加載器。

cnpm install --save-dev file-loader

// ./webpack.config.js
module: {
    rules: [
        ...
        {
            test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,
            use: {
                loader: 'file-loader'
            }
        }
    ]
},

4. babel 轉(zhuǎn)譯 es6 為 es5

$ cnpm install babel-loader babel-core babel-preset-es2015 webpack`

// ./webpack.config.js
module.exports = {
    ...
    // 模塊
    module: {
        rules: [
            ...
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    ...
};

5. 壓縮代碼

// 壓縮js
// ./webpack.config.js
plugins: [
    ...
    new webpack.optimize.UglifyJsPlugin()
]

// 壓縮css
// ./webpack.config.js
module: {
    rules: [
        {
            test: /\.less$/,
            // 打包為單獨文件，minimize壓縮代碼
            use: ExtractTextWebpackPlugin.extract({
                fallback: 'style-loader',
                use: [
                    { loader: 'css-loader', options: { minimize: true } },
                    { loader: 'less-loader' }
                ],
            })
        },
    ]
}

優(yōu)化結(jié)構(gòu)與配置

主要將 js，css，font，image 等打包分開與打包的文件名的 hash 更新，以及將第三方模塊獨立打包。

模塊化第三方庫

1. 安裝第三方庫

$ cnpm install --save angular @uirouter/angularjs bootstrap angular-ui-bootstrap

2. 配置第三方樣式文件單獨打包

// ./app/index.js
import 'bootstrap/dist/css/bootstrap.css';

// ./webpack.config.js
...
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

// 第三方引入的css
var BaseCss = new ExtractTextWebpackPlugin('base.min.css');
// 自定義的css
var AppCss = new ExtractTextWebpackPlugin('app-[hash].css');

module.exports = {

    ...

    // 模塊
    module: {
        rules: [
            {
                test: /\.less$/,
                exclude: /node_modules/,
                // 打包為單獨文件
                use: BaseCss.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                        { loader: 'less-loader' }
                    ],
                })
            },
            {
                test: /\.css$/,
                include: /node_modules/,
                use: AppCss.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                    ]
                })
            },
            ...
        ]
    },

    // 插件
    plugins: [
        ...
        BaseCss, AppCss
    ]
};

樣式文件的分類使用了一個策略：聲明了兩個 ExtractTextWebpackPlugin 實例，以 include 與 exclude 方式隔離第三方庫的 css 文件。

3. 整理樣式目錄

將 css 文件放入 dist/css 中，將字體文件放入 dist/font 中，這里修改了 output 里面的 publicPath，css 文件路徑，字體文件路徑都會讀取這個路徑。

// ./webpack.config.js
...
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
// 第三方引入css
var BaseCss = new ExtractTextWebpackPlugin('css/base.min.css');
var AppCss = new ExtractTextWebpackPlugin('css/app-[hash].css');

module.exports = {

    ...

    // 輸出
    output: {
        path: __dirname + '/dist',
        filename: 'bundle-[hash].js',
        publicPath: '/'
    },

    ...

    // 模塊
    module: {
        rules: [
            ...
            {
                test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'fonts/'
                    }
                }
            }
        ]
    },
    ...
};

$ webpack 查看打包后臺的目錄是否正確，$ npm start 查看服務器上路徑是否引用正確

4. 打包第三方 js 庫

提取第三方 js 庫至單獨文件。

// ./app/index.js
import angular from 'angular';
import uirouter from '@uirouter/angularjs';
import uibootstrap from 'angular-ui-bootstrap';

// ./webpack.config.js
...

module.exports = {

    // 入口
    entry: {
        vendor: ['angular', '@uirouter/angularjs', 'angular-ui-bootstrap'],
        app: __dirname + '/app/index.js'
    },

    ...

    // 插件
    plugins: [
        ...
        // 提取第三方模塊
        new webpack.optimize.CommonsChunkPlugin({
            // 對應的entry數(shù)組vendor
            name: 'vendor',
            filename: 'js/vendor.min.js'
        })
    ]
};

由于第三方的庫文件比較大，并且不是頻繁的更新，所以打包為單獨的文件可以緩存在瀏覽器中，在每次迭代時可以節(jié)省一筆開銷。

優(yōu)化緩存和配置

1. 優(yōu)化文件 hash 更新

js 文件使用[chunkhash:6]，css 文件使用[contenthash:6]，字體文件使用[hash:6]。

...
// 第三方引入css
var BaseCss = new ExtractTextWebpackPlugin('css/base-[contenthash:6].css');
var AppCss = new ExtractTextWebpackPlugin('css/app-[contenthash:6].css');

module.exports = {

    ...

    // 輸出
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name]-[chunkhash:6].js',
        publicPath: '/'
    },

    ...

    // 模塊
    module: {
        rules: [
            ...
            // 加載字體文件
            {
                test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'fonts/',
                        name: '[hash:6].[ext]'
                    }
                }
            }
        ]
    },

    // 插件
    plugins: [
        ...
        // 提取公共模塊
        new webpack.optimize.CommonsChunkPlugin({
            // 對應的entry數(shù)組vendor
            name: 'vendor',
            filename: 'js/vendor-[chunkhash:6].js'
        })
    ]
};

2. 新建開發(fā)模式和生產(chǎn)模式

開發(fā)模式 webpack.dev.js 需要快速響應文件變化，打印錯誤信息；生產(chǎn)模式 webpack.prod.js 需要壓縮代碼，優(yōu)化體積。

配置文件需要使用工具 webpack-merge，先安裝：

$ cnpm install --save-dev webpack-merge
  • webpack.common.js 公共配置
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

    // 輸出
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name]-[chunkhash:6].js',
        publicPath: '/'
    },

    // 模塊
    module: {
        rules: [
            // 轉(zhuǎn)義es6為es5
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            // 加載字體文件
            {
                test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'fonts/',
                        name: '[hash:6].[ext]'
                    }
                }
            }
        ]
    },

    // 插件
    plugins: [
        // 清理打包目錄
        new CleanWebpackPlugin(['dist/**/**'], {
            root: __dirname
        }),
        // 生成入口模板
        new HtmlWebpackPlugin({
            template: 'app/index.html'
        })
    ]
};
  • webpack.dev.js 開發(fā)模式
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    // 入口
    entry: {
        app: __dirname + '/app/index.js'
    },

    // 開發(fā)模式記錄錯誤信息
    devtool: 'inline-source-map',

    // server
    devServer: {
        contentBase: __dirname + '/dist',
    },

    // 模塊
    module: {
        rules: [
            // less,css加載器，為app自定義文件
            {
                test: /(\.less|\.css)$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' }
                ]
            },
        ]
    }

});
  • webpack.prod.js 生產(chǎn)模式
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

// 第三方引入css
var BaseCss = new ExtractTextWebpackPlugin('css/base-[contenthash:6].css');
var AppCss = new ExtractTextWebpackPlugin('css/app-[contenthash:6].css');

module.exports = merge(common, {
    // 入口
    entry: {
        vendor: ['angular', '@uirouter/angularjs', 'angular-ui-bootstrap'],
        app: __dirname + '/app/index.js'
    },

    // 用于生產(chǎn)環(huán)境錯誤信息日志
    devtool: 'source-map',

    // 模塊
    module: {
        rules: [
            // less加載器，為app自定義文件
            {
                test: /\.less$/,
                exclude: /node_modules/,
                // 打包為單獨文件
                use: AppCss.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                        { loader: 'less-loader' }
                    ],
                })
            },
            // css加載器，這里是對第三方庫進行單獨打包
            {
                test: /\.css$/,
                include: /node_modules/,
                use: BaseCss.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                    ]
                })
            }
        ]
    },

    // 插件
    plugins: [
        // css模塊
        BaseCss, AppCss,
        // 壓縮js文件
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true
        }),
        // 提取公共模塊
        new webpack.optimize.CommonsChunkPlugin({
            // 對應的entry數(shù)組vendor
            name: 'vendor',
            filename: 'js/vendor-[chunkhash:6].js'
        }),
        // 設(shè)置node生產(chǎn)環(huán)境變量進行代碼優(yōu)化
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
});

3. 配置文件結(jié)構(gòu)整理

新建 ./build 文件夾，將 webpack.dev.js，webpack.common.js，webpack.prod.js 放入該文件夾。

./build
    - webpack.common.js
    - webpack.dev.js
    - webpack.prod.js

4. 定義 scripts 命令

// ./package.json
"scripts": {
    "start": "webpack-dev-server --open --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
}

OVER...

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容