利用webpack搭建的前端工程化环境

随着webpack3.x的发布,其功能也越来越强大,很多的项目的编译打包工具也由gulp逐渐转移到webpack。最近因为项目重构考虑使用使用vue,同时想从原来的gulp切换到webpack,所以搭建了webpack-vue的前端脚手架工具,这里记录下搭建的过程中的要点。项目源码

1. 用yarn代替npm

npm是一款非常好的包管理工具,之前在用npm安装项目依赖的时候总会因为某些依赖包推出了新版本从而导致编译结果不一样的问题,这是因为在安装依赖的时候npm并没有锁定依赖包的版本号(npm5好像已经解决了这个问题),每次安装的时候总是获取最新的依赖包,导致编译结果不一样。用yarn安装依赖包可以完美的解决这个问题。
官网下载并安装yarn
在命令行中执行yarn -versions,若能输出版本号表示安装成功

2. 初始化生成package.json文件

执行yarn init,填写项目相关信息

3. 安装项目依赖包和开发依赖包

执行yarn add *** ,安装项目依赖包,添加--dev表示安装成开发依赖,具体安装的依赖包可查阅项目源码中package.json文件

4. 建立常用库配置文件并打包常用库文件

1. 新建webpack-dll.config.js文件

这个配置文件只要是用来打包库文件的,这里介绍下几个重点配置

output: {
    path: outputDir,
    filename: 'js/lib/[name].js',
    library: '[name]_library',
    /*libraryTarget: 'umd'*/
},

output中的library和libraryTarget是为了自定义打包后的文件以怎样的形式输出,这里采用默认的var形式

new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify('production')
    }
}),

这里定义环境为开发环境,方便生成的库文件直接用于开发环境

 //稳定模块ID
new webpack.HashedModuleIdsPlugin(),

new webpack.DllPlugin({
    // 本Dll文件中各模块的索引,供DllReferencePlugin读取使用
    path: dll_manifest_name + '.json',
    //当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下,注意与参数output.library保持一致
    name: '[name]_library',
    // 指定一个路径作为上下文环境,需要与DllReferencePlugin的context参数保持一致,建议统一设置为项目根目录
    context: __dirname,
})

这个是为了稳定模块ID并生成manifest文件,方便在生产环境中通过读取dll_manifest知道哪些文件已经被dll打包,而不需要再次打包

2. 生成库文件dll.js

执行 yarn dll,会在src/app/js/lib/文件夹下生成dll.js文件,该文件打包了vue2.5.13,axios0.17.1,flexible,webpack-zepto,具体要打包哪些文件可由webpack-dll.config.js中的entries来配置
若有必要可考虑生成dll.css

5. 建立配置文件

这里我将配置文件分为3个,一个基础配置文件,一个开发环境配置文件,一个生产环境配置文件,开发环境和生产环境配置文件通过webpack-merge插件调用基础配置文件。

基础配置文件webpack.base.js

在基础配置文件中包含了基本的配置信息,这里主要介绍下多页面配置中的htmlWebpackPlugin插件的使用。

var pages = getEntry(entryDir + '/html/**/*.ejs');
for (var pathname in pages) {
    var conf = {
        // html模板文件输入路径
        template: entryDir + '/html/' + pathname + '.js',
        // html文件输出路径
        filename: outputDir + '/html/' + pathname + '.html',
        inject: true,
        cache: true, //只改动变动的文件
        minify: {
            removeComments: true,
            collapseWhitespace: false
        }
    };
    //根据chunks提取页面js,css和公共verdors
    if (pathname in module.exports.entry) {
        conf.chunks = [pathname, 'vendors'];
    } else {
        conf.chunks = ['vendors'];
    }
    module.exports.plugins.push(new htmlWebpackPlugin(conf));
}

这里多页面配置采用的是ejs模板,通过循环入口文件,每个模板文件都配置一个htmlWebpackPlugin插件编译,最后达到生成多个页面的目的,通过chunks来提取页面的js/css/img等

开发环境配置文件webpack.dev.js

在开发环境配置文件,通过使用webpack-dev-server插件来建立一个静态服务器提供服务

devServer: {
    //设置服务器主文件夹,默认情况下,从项目的根目录提供文件
    contentBase: outputDir,
    //自动开启默认浏览器
    //open: true,
    //开启热模块替换,只重载页面中变化了的部分
    //hot: true,
    //hotOnly:true,
    //开启gzip压缩
    compress: true,
    //使用inlilne模式,会触发页面的动态重载
    inline: true,
    //当编译错误的时候,网页上显示错误信息
    overlay: {
        warnings: true,
        errors: true
    },
    //浏览器自动打开的文件夹
    //openPage: 'html/',
    //只在shell中展示错误信息
    //stats: 'errors-only',
    //设置域名,默认是localhost
    host: 'localhost',
    port: 8080
},

在使用热更新时需要使用热更新插件

//热模块替换插件
new webpack.HotModuleReplacementPlugin()

生产环境配置文件webpack.prod.js

在生产环境中我们需要关注公共组件的分离,代码压缩,文件缓存等问题,在公共组件分离时通过读取dll_manifest文件知道哪些文件不用打包,从而减少打包后的文件大小

new webpack.HashedModuleIdsPlugin(),
new webpack.DllReferencePlugin({
    // 指定一个路径作为上下文环境,需要与DllPlugin的context参数保持一致,建议统一设置为项目根目录
    context: __dirname,
    // 指定manifest.json
    manifest: require('../' + dll_manifest_name + '.json'),
    // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下,注意与DllPlugin的name参数保持一致
    name: 'dll_library',
}),

在考虑代码压缩时通过使用以下配置

//压缩css代码
new OptimizeCssAssetsPlugin({
    assetNameRegExp: /\.css\.*(?!.*map)/g, //注意不要写成 /\.css$/g
    cssProcessor: require('cssnano'),
    cssProcessorOptions: {
        discardComments: { removeAll: true },
        // 避免 cssnano 重新计算 z-index
        safe: true
    },
    canPrint: true
}),
//提取css
new ExtractTextPlugin('css/[name].css?v=[contenthash:8]'),
//压缩JS代码
new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    },
    output: {
        comments: false,
    }
}),

在考虑线上文件缓存问题时可以使用以下配置

output: {
    //publicPath: 'http://localhost:8080/',
    filename: 'js/[name].js?v=[chunkhash:8]'
},

这里建议使用chunkhash,使用hash每次编译都会变化

至此配置以基本完成,目前仍有一些不足之处,一直在改进。源码src/app/文件夹下有一demo,大家可参考demo愉快的进行开发了,有问题欢迎评论提出

参考文献
  1. webpack官方文档,
  2. Webpack的dll功能,
  3. 详解webpack中的hash、chunkhash、contenthash区别

原文地址:https://www.cnblogs.com/jesse131/p/9079338.html

时间: 2024-11-01 13:53:22

利用webpack搭建的前端工程化环境的相关文章

四大维度解锁 Webpack 3.0 前端工程化

百度网盘下载 第1章 课程简介 讲述课程背景,从前端开发的变化 到 前端工具的发展变化,介绍了课程内容,课程安排. 第2章 学习准备 讲述模块化开发的思想.学习环境准备,webpack 的概况,版本更迭,核心概念等,为开始实践学习webpack 做准备. 第3章 由浅入深Webpack(1) 由一个个的实例组成,介绍webpack 在处理各种实例的下的配置,实例包括 Typescript Ecmascript Less 语言的预编译,讲解了 Webpack 提取公共代码.代码分割.动态impor

搭建web前端开发环境

目录: 搭建Web开发环境 1.辅助工具——PS(切图.修图.测量) 2.开发.调试工具——常用开发工具和调试工具的功能介绍和使用方法 内容: 切图设计稿(.pdf文件) ———————————— 产出物(如.png .jpg文件)                          素材切出        为什么切图?                给网页提供图片素材                HTML:img    <img src="images/avatar.jpg"

ubuntu环境利用Vagrant搭建一个虚拟开发环境

Vagrant是一个搭建完整的虚拟开发环境的工具,通常简写为VDE(Virtual Development Environment).Vagrant节省大量重建操作系统环境的时间,它也是一个配置中心,允许你使用一个相同的配置管理和部署多个VDE.安装Vagrant的同时,你也需要安装VirtualBox,因为它是Vagrant的核心功能组建. 1.安装virtualboxsudo apt-get install virtualbox 2.vagrant是ruby开发的,所有安装ruby相关的东西

利用Docker搭建java项目开发环境

一.需求 一台 Ubuntu 16.0.4 LTS ,安装了Docker服务,Rancher服务,也制作了Tomcat相关的image,接下来我们就来说一下如何快速的构建一个开发环境和测试环境 二.步骤 2.1:创建本地挂载目录 在宿主host主机上面创建两个目录,一个用来挂载正式环境的war,一个用来挂载测试环境的war,如下图所示 命令:mkdir formal test 接下来用Eclipse创建一个最简单的Dynamic Web Project,只有一个index.jsp然后打包为Tes

Windows下利用Cygwin搭建C/C++开发环境GCC

1.下载cygwin 下载地址:http://www.cygwin.com/ 2.下载完成后点击运行 3.选择镜像时可以选择添加清华镜像,在"User URL"处输入以下地址: https://mirrors.tuna.tsinghua.edu.cn/cygwin/ 点击"Add"按钮, 然后选中"https://mirrors.tuna.tsinghua.edu.cn", 点击"下一步"进行安装. 4.在这个页面之后,就是最

【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工

用grunt搭建自动化的web前端开发环境

用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你

用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工具也是可以

【前端福利】用grunt搭建自己主动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发者.假设你如今还不知道grunt或者听说过.可是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"反复.表示重点). 至于grunt的作用,这里不具体说了.总之你假设做web前端开发,你一定要用grunt.另一点,它全然免费,没有盗版.既强大又免费的东西.为何不用? 当然了,你假设你能找到更好的替代grunt的其它工具