webpack是一个现代JavaScript应用程序的静态模块打包器。它会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，并将这些模块打包成一个或多个的bundle
一、Vue+Webpack项目的搭建
-所需环境和搭建步骤：
1、全局的样式使用@import ‘./xxx.scss’来引入，每个组件都可以使用。
1、mkdir创建一个最外层的文件夹，使用npm init来初始化项目。
2、创建webpack.config.js文件，在其中编写配置项。
3、创建文件夹app,在其中创建项目需要的文件：
1）css/reset.scss，用与清空默认样式；
2) js/router/index.js,用与存放路由表；
js/App.vue、js/main.js、js/test.vue等项目核心文件
js/组件名/…, 用与存放后续各个组件；
3) views/index.html,存放视图模板。
二、Webpack的初始化配置
-配置信息：
1、全局的样式使用@import ‘./xxx.scss’来引入，每个组件都可以使用。
1、webpack环境基于nodeJs，可以在顶部require引入需要的模块如：
const path = require(‘path’)
2、该文件使用module.exports语法向外暴露模块。
3、基础配置如下：
module.exports = {
entry:{app:’./app/js/main.js’}, //单入口用{}多入口用[]
module:{
rules:[
{
test:/.html$/, //正则匹配对应文件
loader:’html-loader’ //使用对应loader去识别对应文件
},
{
test:/.vue$/,
loader:’vue-loader’
},
{
test:/.scss/, //多个loader用！连接，从右往左识别
loader:’style-loader!css-loader!sass-loader’
}]
},
plugin:[],
output:{
filename:’[name].min.js’ , //输出文件名
path: path.resolve(_dirname,’dist’)//输出具体信息
}
}
三、让前端项目启动的配置
-设计步骤：npm i 安装需要的各个依赖，保证其版本正确，使用到的依赖有：
1） 配置相应的loader，loader是让webpack能够去处理非JavaScript
文件，因为其自身只理解JavaScript，loader则是可以将所有类型的文
件转换为webpack能够处理的有效模块，然后开发者就可以利用webpack
的打包能力，对它们进行处理。项目启动前需要配置如下loader：
vue-loader、style-loader、sass-loader、css-loader、
html-loader等loader。
2） 配置devServer，首先npm i -D来安装依赖，然后加入以下配置项：
devServer{
contentBase: path.join(__dirname,’dist’),//定位到首页
compress: true, //是否开启Gzip压缩，开启后页面大小压缩
port: 9000 //前端服务占用的端口
}
3） 配置html-webpack-plugin和clean-webpack-plugin插件：
首先安装和引入模块：
const HtmlWebpackPlugin = require(‘html-webpack-plubin’)
const CleanWebpackPlugin = require(‘clean-webpack-plubin’)
然后在plugins中加入配置：
plugins: [
new CleanWebpackPlugin([‘dist’]),
new HtmlWebpackPlugin({
template: ‘./app/views/index.html’ //加入html模板
})
]
HtmlWebpackPlugin插件的作用：打包输出html模板文件、为输出的模
版文件加上hash值的文件名，推崇浏览器强缓存策略防止读取过期缓存;
CleanWebpackPlugin插件的作用：定时清空devServer指定的隐藏目录
4）配置resolve.alias，来确保正确的模块引入：
resolve:{
alias:{
‘vue$’:’vue/dist/vue.min.js’
}
}
四、自适应配置
需求分析：移动端项目需要适配不同设备，因其设备像素比不同。
-设计方案：
1、本项目用设备像素比为2的设计稿进行开发，开发时参考控制台的机型
1、自适应的设计使用到px2rem的loader，配置如下:
1)安装步骤：npm i px2rem-loader；
2）在vue-loader中添加options选项：
给项目样式中用到的两种css语言做配置,scss需先转css：
options:{
css: ‘vue-style-loader!css-loader!px2rem-loader
?remUnit=75&remPrecision=8’,
scss: ‘vue-style-loader!css-loader!px2rem-loader
?remUnit=75&remPrecision=8!sass-loader’
}
注意：参数remUnit代表1个rem默认转75px，
参数remPrecision代表精度最多保留小数点后8位。
3）自适应的适配：
引入viewport.js文件存放在js文件夹根目录，文件内容是
引入github上的hotcss.js向外暴露px2rem的各个方法。
4）使用webpack将viewport.js打至入口,多入口文件写法：
entry:[‘./app/js/viewport.js’,
‘./app/js/main.js’]
五、css模块化设计
-设计方案：
1、vue项目中在style标签上加module，模板中绑定”$style.类名”，
这样做后可以做到css的模块化。
2、webpack的配置，在vue-loader的options里适配：
cssModules:{ //注意webpack使用版本会影响以下配置的写法
localIdentName:’[path][name]—[local]—[hash:base64:5]’
,camelCase: true
}
3、提取css为单个css文件的配置:
使用ExtractTextPlugin：
1）安装并引入插件：
const ExtractTextPlugin = require(‘
extract-text-webpack-plugin’)
2)修改vue-loader里options的loaders写法：
options:{
loaders:{ //vue-style-loader改为fallback的形式引入
css: ExtractTextPlugin.extract({
use:’css-loader!px2rem-loader
?remUnit=75&remPrecision=8’,
fallback: ‘vue-style-loader’
}),
scss: ExtractTextPlugin.extract({
use:’css-loader!px2rem-loader
?remUnit=75&remPrecision=8!sass-loader’,
fallback: ‘vue-style-loader’
})
}
}
3）插件plugins加入配置：
plugins:[
…
new ExtractTextPlugin(‘style.css’)
]
4)适配好后，可看见页面模板中的css变为link引入的文件。
六、根据当前环境是开发环境或者生产环境改变webpack配置
-设计方案：
1、使用DefinePlugin来创建一个在编译时可以配置的全局常量，这
个常量可以用于定义当前是开发模式或者是生产模式。
2、首先修改webpack的module.exports写法，默认是向外暴露一个对象，
但是我们需要根据环境变量的不同来填写配置项，所以用如下写法：
module.exports = env =>{ //ES6写法
return {…}
}
3、我们可以根据环境变量不同，添加更多插件，并修改webpack本身Node环境。
例如：如果当前是生产环境，则添加更完善的插件和功能配置；
如果当前是开发环境，则可以更加轻量级，不添加太多插件。
4、配置如下：
1)引入webpack模块
cosnt webpack = require(‘webpack’)
2)给env参数做空值的错误处理
if(!env){ env = {} }
3）定义通用插件：
let plugins = [
new CleanWebpackPlugin([‘dist’]),
new HtmlWebpackPlugin({
template: ‘./app/views/index.html’
})
]
4)配置生产环境时的额外插件和功能：
即只有当env.production参数存在的时候，才完善生产环境的配置。
if(env.production){
plugins.push(
new webpack.DefinePlugin({
‘process.env’:{
NODE_ENV: ‘“production”‘
}
}),
new ExtractTextPlugin(‘style.css’)
)
}
5）vue-loader中options的loaders也需要根据env变量进行变化，
即对使用到插件的loader配置也进行处理，这里可以使用三元表达式：
loaders: env.production ? {
css: ExtractTextPlugin.extract({
use: ‘css-loader!px2rem-loader
?remUnit=75&remPrecision=8’,
fallback: ‘vue-style-loader’
}),
scss: ExtractTextPlugin.extract({
use: ‘css-loader!px2rem-loader
?remUnit=75&remPrecision=8!sass-loader’,
fallback: ‘vue-style-loader’
})
} : {
css:’vue-style-loader!css-loader!px2rem-loader
?remUnit=75&remPrecision=8’,
scss:’vue-style-loader!css-loader!px2rem-loader
?remUnit=75&remPrecision=8!sass-loader’,
}