详解webpack进阶之插件篇

2024-02-16 19:50:03 49

一、插件篇

1.自动补全css3前缀

autoprefixer

官方是这样说的：ParseCSSandaddvendorprefixestoCSSrulesusingvaluesfromtheCanIUsewebsite，也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。

举个栗子：最新的弹性盒模型flux

实际代码：

:fullscreena{
display:flex
}

插件自动补充后

a{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex
}

效果显而易见，我们可以更专注于css布局和美化，而不需要花过多的精力都写相同的外码而加上不同的前缀，也减少了冗余代码。

使用方法:

cnpminstall--save-devautoprefixerpostcss-loader

varautoprefixer=require('autoprefixer');
module.exports={
//其他配置这里就不写了

module:{
loaders:[
{
test:/\.css$/,
//在原有基础上加上一个postcss的loader就可以了
loaders:['style-loader','css-loader','postcss-loader']
}
]
},
postcss:[autoprefixer({browsers:['last2versions']})]

}

2.自动生成html插件

html-webpack-plugin

cnpminstallhtml-webpack-plugin--save-dev

//webpack.config.js
varHtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./index.js',
output:{
path:__dirname+'/dist',
filename:'bundle.js'
}
plugins:[
newHtmlWebpackPlugin()
]
}

作用:它会在dist目录下自动生成一个index.html





WebpackApp

其他配置参数:

{
entry:'index.js',
output:{
path:'dist',
filename:'bundle.js'
},
plugins:[
newHtmlWebpackPlugin({
title:'MyApp',
filename:'admin.html',
template:'header.html',
inject:'body',
favicon:'./images/favico.ico',
minify:true,
hash:true,
cache:false,
showErrors:false,
"chunks":{
"head":{
"entry":"assets/head_bundle.js",
"css":["main.css"]
},
xhtml:false
})
]
}

---header.html---




<%=htmlWebpackPlugin.options.title%>

作用：

title:设置title的名字
filename:设置这个html的文件名
template:要使用的模块的路径
inject:把模板注入到哪个标签后'body',
favicon:给html添加一个favicon './images/favico.ico',
minify:是否压缩 {...}|false（最新api变动，原来是ture|false感谢@onmi指正)
hash:是否hash化truefalse,
cache:是否缓存,
showErrors:是否显示错误,
chunks:目前没太明白
xhtml:是否自动毕业标签默认false

3.提取样式插件

extract-text-webpack-plugin

官网是这么解释的Extracttextfrombundleintoafile.,把额外的数据加到编译好的文件中

varExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports={
module:{
loaders:[
{test:/\.css$/,loader:ExtractTextPlugin.extract("style-loader","css-loader")}
]
},
plugins:[
newHtmlWebpackPlugin({
template:'./src/public/index.html',
inject:'body'
}),
newExtractTextPlugin("[name].[hash].css")
]
}

说明：将css放到index.html的body上面

4.拷贝资源插件

copy-webpack-plugin

官方这样解释Copyfilesanddirectoriesinwebpack,在webpack中拷贝文件和文件夹

cnpminstall--save-devcopy-webpack-plugin

newCopyWebpackPlugin([{
from:__dirname+'/src/public'
}]),

作用：把public里面的内容全部拷贝到编译目录

参数作用其他说明 from 定义要拷贝的源目录 from:__dirname+'/src/public' to 定义要烤盘膛的目标目录 from:__dirname+'/dist' toType file 或者 dir 可选，默认是文件 force 强制覆盖先前的插件可选默认false context 不知道作用可选默认basecontext可用specificcontext flatten 只拷贝文件不管文件夹默认是false ignore 忽略拷贝指定的文件可以用模糊匹配

5.全局挂载插件

webpack.ProvidePlugin[webpack内置插件]

newwebpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
}))
newwebpack.NoErrorsPlugin(),
newwebpack.optimize.DedupePlugin(),
newwebpack.optimize.UglifyJsPlugin(),
newwebpack.optimize.CommonsChunkPlugin('common.js')

作用:和上面5个一一对应

当模块使用这些变量的时候,wepback会自动加载。（区别于window挂载，感谢@lihuanghe121指正）
不显示错误插件
查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
丑化js混淆代码而用
提取公共代码的插件

二、一个完整的栗子

'usestrict';

//Modules
varwebpack=require('webpack');
varautoprefixer=require('autoprefixer');
varHtmlWebpackPlugin=require('html-webpack-plugin');
varExtractTextPlugin=require('extract-text-webpack-plugin');
varCopyWebpackPlugin=require('copy-webpack-plugin');

/**
*Env
*Getnpmlifecycleeventtoidentifytheenvironment
*/
varENV=process.env.npm_lifecycle_event;
varisTest=ENV==='test'||ENV==='test-watch';
varisProd=ENV==='build';

module.exports=functionmakeWebpackConfig(){
varconfig={};

config.entry=isTest?{}:{
app:'./src/app/app.js'
};

config.output=isTest?{}:{
//Absoluteoutputdirectory
path:__dirname+'/dist',

publicPath:isProd?'/':'http://localhost:8080/',

filename:isProd?'[name].[hash].js':'[name].bundle.js',

chunkFilename:isProd?'[name].[hash].js':'[name].bundle.js'
};

if(isTest){
config.devtool='inline-source-map';
}elseif(isProd){
config.devtool='source-map';
}else{
config.devtool='eval-source-map';
}

config.module={
preLoaders:[],
loaders:[{
test:/\.js$/,
loader:'babel',
exclude:/node_modules/
},{
test:/\.css/,
loader:isTest?'null':ExtractTextPlugin.extract('style','css?sourceMap!postcss')
},{
test:/\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader:'file'
},{
test:/\.json$/,
loader:'json'
},{
test:/\.scss/,
loader:'style!css!sass'
},{
test:/\.html$/,
loader:'raw'
}]
};
if(isTest){
config.module.preLoaders.push({
test:/\.js$/,
exclude:[
/node_modules/,
/\.spec\.js$/
],
loader:'isparta-instrumenter'
})
}

config.postcss=[
autoprefixer({
browsers:['last2version']
})
];

config.plugins=[];
if(!isTest){
config.plugins.push(
newHtmlWebpackPlugin({
template:'./src/public/index.html',
inject:'body'
}),

newExtractTextPlugin('[name].[hash].css',{disable:!isProd})
)
}

if(isProd){
config.plugins.push(
newwebpack.NoErrorsPlugin(),

newwebpack.optimize.DedupePlugin(),

newwebpack.optimize.UglifyJsPlugin(),

newCopyWebpackPlugin([{
from:__dirname+'/src/public'
}]),
newwebpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
}))
}

config.devServer={
contentBase:'./src/public',
stats:'minimal'
};

returnconfig;
}();

三、调试技巧

if(isTest){
config.devtool='inline-source-map';
}

作用:使用source-map可以在debug的时候看到源代码，方便查错

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

详解webpack进阶之插件篇

热门推荐

随机推荐