美文网首页
webpack 项目实战 - ES6+AngularJS

webpack 项目实战 - ES6+AngularJS

作者: YuJinpan | 来源:发表于2019-05-07 18:32 被阅读0次

    本项目基于 webpack@3.0 版本

    目录

    • 安装与基础配置
    • 常用插件
    • 常用加载器
    • 优化结构与配置

    安装与基础配置

    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',

    // 开发模式记录错误信息
    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 开发服务器

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

// ./webpack.config.js
...
module.exports = {
    ...
    devServer: {
        // 服务器文件路径
        contentBase: './dist',
        // 不跳转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 转译 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' }
                ],
            })
        },
    ]
}

    优化结构与配置

    主要将 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数组vendor
            name: 'vendor',
            filename: 'js/vendor.min.js'
        })
    ]
};

    由于第三方的库文件比较大，并且不是频繁的更新，所以打包为单独的文件可以缓存在浏览器中，在每次迭代时可以节省一笔开销。

    优化缓存和配置

    1. 优化文件 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数组vendor
            name: 'vendor',
            filename: 'js/vendor-[chunkhash:6].js'
        })
    ]
};

    2. 新建开发模式和生产模式

    开发模式 webpack.dev.js 需要快速响应文件变化，打印错误信息；生产模式 webpack.prod.js 需要压缩代码，优化体积。

    配置文件需要使用工具 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: [
            // 转义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 开发模式
    const merge = require('webpack-merge');
const common = require('./webpack.common.js');

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

    // 开发模式记录错误信息
    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 生产模式
    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'
    },

    // 用于生产环境错误信息日志
    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数组vendor
            name: 'vendor',
            filename: 'js/vendor-[chunkhash:6].js'
        }),
        // 设置node生产环境变量进行代码优化
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
});

    3. 配置文件结构整理

    新建 ./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...

    相关文章

      网友评论

          本文标题：webpack 项目实战 - ES6+AngularJS

          本文链接：https://www.haomeiwen.com/subject/daahoqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|webpack 项目实战 - ES6+AngularJS|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！