Webpack环境的安装及应用
Posted web前端与开发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webpack环境的安装及应用相关的知识，希望对你有一定的参考价值。
1. 在网页中会引用哪些常见的资源？
CSS
.css、.less、.scss
JS
.js、.coffee
图片
.jpg|.png|.gif|.bmp
模板文件
artTemplate、.ejs、.vue
字体
eot|woff|ttf|woff2|svg
2. 网页中这些常见的资源多了以后会出现什么问题
假如网页中引用了很多的外部资源文件，那么会发起很多的二次请求
每个资源文件之间，可能会有相互的依赖关系
3. 如何解决上述两个问题
可以进行相同类型资源文件的合并
图片如何合并:精灵图、base64
4. 如何完美实现上述的三种解决方案
gulp：压缩、合并
gulp使用入门
gulp中文网
gulp英文官网
webpack:webpack站的位置更高一些，能够从宏观的角度去构建整个项目
根据官网的图片介绍webpack打包的过程
webpack只是中间的一个处理层，从入口开始进行资源的打包构建，最后，将处理完成的资源文件，以出口的形式输出为具体的资源文件！
高内聚、低耦合
什么是模块化、什么是组件化，以及框架使用的意义
从UI的方面进行功能的拆分
针对功能方面进行拆分， 每个模块只包含与其功能相关的内容
模块化就是将一个程序按照功能进行拆分，分成相互独立的模块，以便每个模块只包含与其功能相关的内容。
组件化就是基于可重用的目的，将一个大的软件系统按照分离关注点的形式，拆分成多个独立的部分，每个独立的部分称之为一个组件。
5. webpack安装的两种方式
全局安装：运行
npm i webpack -g将webpack安装为全局局部安装：运行
npm i webpack --save-dev将webpack安装到项目开发依赖中
6.
7. 使用webpack的配置文件简化打包时候的命令
当指定入口和出口的时候，webpack会直接进行打包
当没有指定入口和出口的时候，webpack会去项目根目录中查找指定名称为
webpack.config.js这个配置文件，读取其中导出的配置，然后进行打包编译；
module.exports = { // 通过entry属性，指定入口文件路径 entry: path.join(__dirname, 'main.js'), output: { // 指定打包好文件的出口 path: path.join(__dirname, 'dist'), // 指定输出路径 filename: 'bundle.js' // 指定输出的文件名，可以在加上 js/ 将文件放入到js文件夹中 }}
8. 使用webpack-dev-server实现实时打包构建
运行
npm i webpack-dev-server --save-dev在
package.json的script节点下新增：
"dev": "webpack-dev-server"
输入相关的指令：
"dev": "webpack-dev-server --open --port 3000 --hot"
或者在配置文件中指定相关指令：
var webpack = require('webpack');
devServer:{
// --open --port 3000 --hot
open:true, // 自动打开浏览器
port:3000, // 指定端口号
hot:true, // 指定启用热更新
openPage:'index.html'// 3.0以后需要加上，指定首页
},
plugins:[
new webpack.HotModuleReplacementPlugin() // 使用webpack
的热更新插件 ]
9. 使用html-webpack-plugin插件配置启动页面
作用：帮我们在内存中生成一个
index.html首页，同时，自动将打包好的bundle.js文件，以script标签的形式，注入到生成的页面中！运行
cnpm i html-webpack-plugin --save-dev在配置文件中导入插件
var htmlWebpackPlugin = require('html-webpack-plugin'); // 导入自动生成HTMl文件的插件在
plugins节点下新增：
new htmlWebpackPlugin({ // 在内存中自动生成HTMl文件
template:path.join(__dirname, 'index.html'), // 指定模板文件
filename:'index.html' // 指定内存中，生成文件的名称 })
10. 使用webpack打包css文件
运行
npm i style-loader css-loader --save-dev在配置文件中新增相关loader处理模块：
module:{ // 作用：配置处理第三方文件类型的模块
rules:[ // 第三方文件的匹配规则
{test:/\.css$/, use:['style-loader',
'css-loader']} // 处理CSS文件的匹配规则 ] }
11. 使用webpack打包sass文件
运行
npm i sass-loader node-sass --save-dev，sass-loader 依赖于 node-loader添加相关loader：
{test:/\.scss$/, use:['style-loader', 'css-loader',
'sass-loader']} // 处理sass文件的匹配规则
12. 使用webpack处理css中的路径
运行
npm i url-loader file-loader --save-dev添加相关loader：
{ test: /\.(png|jpg|jpeg|gif|bmp)$/, use: 'url-loader' }
// 处理图片文件的匹配规则
13. 使用babel处理高级JS语法
运行
npm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装Babel转换器相关的模块运行
npm i babel-preset-es2015 babel-preset-stage-0 --save-dev添加相关loader，一定要注意：通过
exclude属性，将node_modules文件夹排除，否则，项目运行不起来！
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
// 处理JS文件的匹配规则,【注意：】一定要通过exclude属性，将node_modules
文件夹排除，否则，会报错！！！
在项目根目录中，创建一个
.babelrc的Babel配置文件，文件内容格式如下：
{ "presets":["es2015", "stage-0"],
"plugins":["transform-runtime"]}
14. webpack的发布策略
在实际开发中，一般会有两套项目方案：
一套是开发期间的项目，包含了测试文件、测试数据、开发工具、测试工具等相关配置，有利于项目的开发和测试，但是这些文件仅用于开发，发布项目时候需要剔除；
另一套是部署期间的项目，剔除了那些客户用不到的测试数据测试工具和文件，比较纯净，减少了项目发布后的体积，有利于安装和部署！
为了满足我们的发布策略，需要新建一个配置文件，命名为
webpack.publish.config.js，将webpack.config.js的配置拷贝过去，剔除一些开发配置项即可：
将
devServer节点删掉：
devServer: {
hot: true,
open: true,
port: 4321 }
将
plugins节点下的热更新插件删掉：
new webpack.HotModuleReplacementPlugin()
修改
url-loader，将图片放入统一的images文件夹之下：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images
/[name].[ext]' }
或者使用img-前缀加上7位的hash名称：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images
/img-[hash:7].[ext]' }
在
package.json中的script节点下新增dev命令，通过--config指定webpack启动时要读取的配置文件：
"pub": "webpack --config webpack.publish.config.js"
// webpack-dev-server是我们的开发服务器dev就是 developer的缩写
"dev": "webpack-dev-server",
// 配置发布模式 通过--config 参数
指定webpack运行时所指定的配置文件
"pub": "webpack --config webpack-publish.config.js"
15. 每次重新构建时候删除dist目录
运行
npm i clean-webpack-plugin --save-dev在头部引入这个插件：
var cleanWebpackPlugin = require('clean-webpack-plugin');
在
plugins节点下使用这个插件：
new cleanWebpackPlugin(['dist'])
16. 分离第三方包改造webpack.publish.config.js
改造entry节点如下：
entry: { //app || venders 为变量，可以随便起名字
app: path.resolve(__dirname, 'src/js/main.js'), // 自己代码的
入口
vendors: ['jquery'] // 要分离的第三方包的入口 }
在plugins节点下新增插件：(optimize:优化)
new webpack.optimize.CommonsChunkPlugin({ // 抽离第三方包的插件
name:'vendors', // 指定抽离第三方包的入口名称 //
filename:'vendors.js' 在前面加入 js/ 放入到js文件夹中，抽离出的
公共模块的名称
filename:'js/vendors.js' // 抽离出的公共模块的名称})
html-webpack-plugin在生成index.html文件的时候，会自动将抽离的第三方包引入进去！
17. 优化压缩JS
在plugins数组中添加：
new webpack.optimize.UglifyJsPlugin({ // 优化压缩JS
compress:{ warnings:false
// 移除警告 }}),new webpack.DefinePlugin({
// 设置为产品上线环境，进一步压缩JS代码，为了避免压缩报错
'process.env.NODE_ENV': '"production"'})
18. 优化压缩HTML文件
在plugins节点下的htmlWebpackPlugin插件中，添加minify子节点：
minify:{// 压缩HTML代码
collapseWhitespace:true, // 合并空白字符
removeComments:true, // 移除注释
removeAttributeQuotes:true // 移除属性上的引号}
其他优化项请参考：html-minifier - github
19. 抽取CSS文件
运行
npm install --save-dev extract-text-webpack-plugin安装抽取CSS文件的插件。在配置文件中导入插件：
var ExtractTextPlugin = require("extract-text-webpack-plugin");
修改CSS和Sass的loader如下：
{ test: /\.css$/, use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader"],
publicPath:'../' })},
{ test: /\.scss$/, use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'sass-loader'],
publicPath:'../' })}
在plugins节点下新增插件：
new ExtractTextPlugin("styles.css"), // 抽取CSS文件的插件，起名
为style.js
20. 压缩抽取出来的CSS文件
运行
cnpm i optimize-css-assets-webpack-plugin --save-dev安装插件到开发依赖。在配置文件头部导入插件：
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack
-plugin');
在plugins节点下新增插件：
new OptimizeCssAssetsPlugin() // 压缩CSS文件的插件
以上是关于Webpack环境的安装及应用的主要内容，如果未能解决你的问题，请参考以下文章