vue项目中webpack使用总结
2019-03-21 本文已影响0人
ysp123
webpack创建vue的运行环境
//初始化运行环境
npm init
//wepack4.X需安装webpack-cli
npm install webpack webpack-cli --save
新建webpack.config.js 文件
const path = require('path');
module.exports = {
//入口文件
entry:{
main:'./src/app.js'
},
//文件输出
output:{
path:path.resolve(__dirname,'dist'),
filename:'build.js'
}
}
package.json文件中添加
//添加dev
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --config webpack.config.js --mode development"
},
支持自动刷新
npm install webpack-dev-server --save
添加配置：
module.exports = {
.........
devServer{
port:'端口号'
historyApiFallback: true
}
}
package.json更改为：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js --mode development"
}
使用webpack-dev-server完成配置即可使用域名访问
配置vue(vue+vue-loader+vue-template-compiler)
//支持vue
npm install vue vue-loader vue-template-compiler --save
//webpack.config.js 添加vue配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
......
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
}
]
},
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
plugins:[
new VueLoaderPlugin()
]
.....
}
以上初步完成webpack支持vue的基础环境，还需支持es6,css,img的格式的支持还要添加相关loader
支持es6解析babel7
npm install @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime @babel/cli @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-proposal-export-default-from
module:{
rules:[
........
{
test:/\.js$/,
loader:'babel-loader',
options:{
presets:['@babel/preset-env'],
plugins:['@babel/plugin-transform-runtime']
}
}
]
}
支持css解析
npm install style-loader css-loader --save
module:{
rules:[
........
{
test:/\.css$/,
loader:'style-loader!css-loader',
}
]
}
支持img 图片等解析
npm install file-loader url-loader
//webpack配置
module:{
rules:[
..........
{
test:/\.(png|jpg|jpeg|gif|svg)$/,
use:[
{
loader:'url-loader',
options:{
limit:10000, //限制图片大小为10000B,小于限制转为base64的格式
//超出限制，创建文件格式
// build/images/[图片名].[hash].[图片格式]
name:'images/[name].[hash].[ext]'
}
}
]
}
]
}
支持sass方式解析
npm install vue-style-loader --save //此属于vue的配置
npm install node-sass sass-loader --save
module:{
rules:[
............
{
test:/\.sass$/,
loader:'vue-style-loader!css-loader!sass-loader'
}
]
}
支持模板设置html-webpack-plugin
npm install html-webpack-plugin --save
const HtmlWebpackPlugin = require('html-webpack-plugin');
.......
module.exports = {
........
plugins:[
..........
new HtmlWebpackPlugin({
title:"XXXXXX",
template:"./index.html",
minify:{
.........
}
})
]
}
//html-webpack-plugin 可配置参数
1.title：生成的HTML模板的title，如果模板中有设置title的名字，则会忽略这里的设置
2.filename：生成的模板文件的名字
3.template：模板来源文件（html文件）
4.inject：引入模板的注入位置，取值有true/false/body/head
true：默认值，script标签位于html文件的body底部
body:script标签位于html文件的body底部
head:script标签位于html文件的head中
false:不插入生成的js文件，这个几乎不会用到的
5.favicon：指定页面图标，
6.minify：使用minify会对生成的html文件进行压缩，默认是false。html-webpack-plugin内部集成了html-minifier，因此，还可以对minify进行配置，常用的配置项是：
caseSensitive:false,//是否大小写敏感
collapseWhitespace:true//是否去除空格
removeAttributeQuotes:true// 去掉属性引用
removeComments:true,//去注释
支持css文件提取：由于webpack4以后对css模块支持的逐步完善和commonchunk插件的移除，在处理css文件提取的计算方式上也做了些调整，之前我们首选使用的[extract-text-webpack-plugin]也完成了其历史使命，将让位于[mini-css-extract-plugin]
npm install mini-css-extract-plugin --save
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module:{
rules:[
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
"css-loader"
]
},
.........
{
test:/\.sass/,
use:[
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
},
plugins:[
new MiniCssExtractPlugin({
filemame:'[name].css',
chunkFilename:"[id].css"
});
]
压缩css
npm install optimize-css-assets-webpack-plugin --save
plugins:[
.......
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano
cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给cssProcessor的选项，默认为{}
canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
}),
]
参考：
https://blog.csdn.net/github_37360787/article/details/82183557
https://blog.csdn.net/weixin_40184174/article/details/85125388
https://www.jianshu.com/p/07c8ff5ef37f
https://segmentfault.com/a/1190000014247030
https://blog.csdn.net/wopelo/article/details/78403661
