webpack4 升级迁移的实现
好久不看webpack已经从3到4了，其实很早到今年2月份就开始发布webpack4的beta版本；
每一次webpack的升级都还是建议阅读下《webpack4:releasedtoday!-SeanT.Larkin》。你需要明白，为什么webpack又要迭代一个新的里程碑，以及带了什么新的特性；这里简单总结下:
- Faster！！！Webpack在bundlebundle的时间会缩短至少60个点，最高可以到98%;(我们似乎可以节省一些时间去这些事情)
- Mode增加了新的属性，来支持development和production的区别，从而达到更好的优化效果；
- CommonsChunkPlugin不将启用；取而代之的新的APIoptimization.splitChunks;
- WebAssembly的支持，现在默认支持importexport和WebAssembly的模块；
如果你是webpack2+迁移的话，相对而言成本会小一些，因为配置语法变化不大，但是如果webpack1迁移的话，建议你仔细看下后面的配置变化；
安装Webpack
首先需要更新Webpack的版本，我们可以重新安装Webpack
npmi-gwebpack
然后再安装一个轻量级的命令行工具
yarnaddwebpackwebpack-cli-D
配置babel
我们可以自己建一个目录存放webpack的配置，我们暂时就叫webpack也行；
babel配置
npmibabel-loaderbabel-corebabel-preset-env--save-dev
我们在webpack目录下新建loaders.js文件；
constJSLoader={
test:/\.js$/,
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
presets:['env']
}
}
};
module.exports={
JSLoader:JSLoader
};
当前你也可以使用之前的方式.babelrc中配置插件和preset。
然后再webpack/webpack.config.js加上基本的loader配置
constpath=require('path');
constloaders=require('./loaders');
module.exports={
entry:["./src/js/app.js"],
module:{
rules:[
loaders.JSLoader
]
},
output:{
path:path.resolve(__dirname,"dist"),
filename:"js/[name].bundle.js"
},
};
添加eslint
首先在项目里面配置eslint：
eslint--init
配置完成后，我们需要安装eslint-loader
npmieslint-loader--save-dev
同理，我们可以修改webpack/loaders.js；
...
constESLintLoader={
test:/\.js$/,
enforce:'pre',
exclude:/node_modules/,
use:{
loader:'eslint-loader',
options:{
configFile:__dirname+'/.eslintrc'
},
}
};
module.exports={
JSLoader:JSLoader,
ESLintLoader:ESLintLoader,
};
然后再webpack/webpack.config.js中修改
module.exports={
...
module:{
rules:[
loaders.JSLoader,
loaders.ESLintLoader
]
},
...
};
处理sass/less
接下来我们看下如何处理sass或者less，代码例子以sass为例子；
npminode-sasscss-loaderstylelint stylelint-webpack-pluginoptimize-css-assets-webpack-pluginpostcsspostcss-preset-envpostcss-loader cssnanosass-loadermini-css-extract-plugin--save-dev
其中几个插件需要简单说明下;
- stylelint和eslint类似，主要用于规范我们的样式文件
- mini-css-extract-plugin用于单独打包样式文件的插件
- optimize-css-assets-webpack-plugin用于优化样式资源的插件
接下来我们需要配置sassloader和cssloader;
constcssLoader={
test:/\.css$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
},
{
loader:'css-loader',
},
{
loader:'postcss-loader',
options:{
config:{
path:path.join(__dirname,'./postcss.config.js'),
}
},
},
],
};
constsassLoader={
test:/\.scss$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
},
{
loader:'css-loader',
},
{
loader:'postcss-loader',
options:{
config:{
path:path.join(__dirname,'./postcss.config.js'),
}
},
},
{
loader:'sass-loader',
},
],
};
constcssLoader={
test:/\.css$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
},
{
loader:'css-loader',
},
{
loader:'postcss-loader',
options:{
config:{
path:path.join(__dirname,'./postcss.config.js'),
}
},
},
],
};
constsassLoader={
test:/\.scss$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
},
{
loader:'css-loader',
},
{
loader:'postcss-loader',
options:{
config:{
path:path.join(__dirname,'./postcss.config.js'),
}
},
},
{
loader:'sass-loader',
},
],
};
...
module.exports={
...
sassLoader,
cssLoader,
};
增加插件处理用于优化样式文件;
在webpacj/pugin.js中添加下面内容;
const_ExtractTextPlugin=require('extract-text-webpack-plugin');
const_HtmlWebpackPlugin=require('html-webpack-plugin');
const_MiniCssExtractPlugin=require("mini-css-extract-plugin");
const_StyleLintPlugin=require('stylelint-webpack-plugin');
const_OptimizeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin');
constcssnano=require('cssnano');
constpath=require('path');
constStyleLintPlugin=new_StyleLintPlugin({
configFile:path.resolve(__dirname,'./stylelint.config.js'),
context:path.resolve(__dirname,'../css'),
files:'**/*.css',
failOnError:false,
quiet:false,
});
constMiniCssExtractPlugin=new_MiniCssExtractPlugin({
//bothoptionsareoptional
filename:"vr-player.min.css",
chunkFilename:"[id].css"
});
constOptimizeCssAssetsPlugin=new_OptimizeCssAssetsPlugin({
assetNameRegExp:/\.css$/g,
cssProcessor:cssnano,
cssProcessorOptions:{discardComments:{removeAll:true}},
canPrint:true
})
module.exports={
MiniCssExtractPlugin,
StyleLintPlugin,
OptimizeCssAssetsPlugin
};
在webpack/webpack.config.js中增加plugins的配置；
...
constplugins=require('./plugins');
module.exports={
...
plugins:[
//plugins.ExtractTextPlugin,
plugins.MiniCssExtractPlugin,
plugins.HtmlWebpackPlugin
]
};
处理svg或者图片资源
npmiimage-webpack-loaderurl-loaderbase64-inline-loader--save-dev
修改webpack/loader.js中的配置：
constsvgLoader={
test:/\.svg$/,
use:[
{
loader:'image-webpack-loader',
},
{
loader:'base64-inline-loader',
}
],
};
constimageLoader={
test:/\.(png|jpg|jpeg|gif)$/,
use:'url-loader?limit=1024&name=images/[name]_[hash].[ext]'
};
同理可以需要在webpack中修改对应文件；
配置devServer
npmiwebpack-dev-server--save-dev
在新的配置中我们可以在devServer中配置我们起一个服务器的端口号和网络控制;
module.exports={
...
devServer:{
port:9000,
headers:{'Access-Control-Allow-Origin':'*'},
hot:true,
inline:true,
progress:true,
quiet:true,
compress:true,
disableHostCheck:true,
},
}
设置package.json的命令
{
"scripts":{
"build":"webpack-p--config./webpack/webpack.config.js--display-error-details",
"dev":"webpack-dev-server--config./webpack/webpack.config.js--display-error-details"
}
}
差不多就这样子可以完成基本的配置了；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。