webpack3学习
标签：
webpack npm install -g webpack?
npm init
?
npm install --save-dev webpack
?
npm install -g live-server
?
npm install webpack-dev-server
?
-D 等价于 --save-dev devtool: devtool:
source-map 独立map
cheap-moudle-source-map 独立
eval-source-map eval js 开发阶段
cheap-moudle-eval-source-map js压缩 const uglifyjs = require(‘uglifyjs-webpack-plugin‘);
?
plugins:[
• new uglify()
] HTML打包 npm install --save-dev html-webpack-plugin
?
const htmlPlugin = require(‘html-webpack-plugin‘)
?
plugins:[
• new uglify({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:‘./src/index.html‘
})
] CSS、图片 npm install --save-dev file-loader url-loader
?
module:{
rules:{
test:/\.css$/,
use:[{
loader:"style-loader" #loader不需要引入plugin才需要
},{
loader:"css-loader"
}]
},{
test:/\.(png|jpg|gif)/,
use:[{
loader:"url-loader",
options:{
limit:5000 #小于这个，会打成base64
}
},{
loader:"css-loader"
}]
}
} CSS疏散 npm install --save-dev extract-text-text-webpack-plugin
?
const extractTextPlugin = require("extract-text-webpack-plugin");
?
var website={
publicPath:"http://localhsot"
}
?
output:{
publicPath:website.publicPath
}
?
plugins:[
new extractTextPlugin("css/index.css")
]
?
? 图片疏散 参考：github.com/wzsxyz/html-withimg-loader 疏散less npm install --save-dev less
npm install --save-dev less-loader
?
module:{
rules:[{
test:/\.less$/,
use:[{
loader:"style-loader"
},{
loader:"css-loader"
},{
loader:"less-loader"
}]
},{
test:/\.less$/,
use:extractTextPlugin.extract({
use:[{
loader:"css-loader"
},{
loader:"less-loader"
}],
fallback:"style-loader"
})
}]
} 疏散sass npm install --save-dev node-sass sass-loader
?
{
test:/\.scss$/,
use:extractTextPlugin.extract({
use:[{
loader:"css-loader"
},{
loader:"scss-loader"
}],
fallback:"style-loader"
})
} css属性前缀 参考：github.com/postcss/postcss-loader 断根无用的CSS npm i -D purifycss-webpack purify-css
?
const glob=require(‘glob‘);
const PurifyCssPlugin=require("purifycss-webpack");
?
plugins:[
new PurifyCssPlugin({
paths:glob.sync(path.join(__dirname,‘src/*.html‘))//找到src下面的所有
})
] 开发和出产依赖的安置 devDependencies:开发依赖
dependencies：出产依赖
安置方法：
npm install 安置全局
npm install --save 安置到dependencies
npm install --save-dev 安置到devDependencies
?
"scripts":{
"server":"webpack-dev-server --open",
"dev":"set type=dev&webpack" //mac "export type=dev&&webpack"
} 引入第三方类库 const webpack = require("webpack")
?
plugins:[
new webpack.ProvidePlugin({
$:"jquery"
})
] watch配置 watchOptions:{
poll:1000 //监测时间
aggregeateTimeout:500 //打包间隔
ignored:/node_modules/,//忽略的
} webpack优化 new webpack.optimize.CommsChunkPlugin({
name:‘jquery‘, //要抽离的类库
filename:"assets/js/jquery.min.js"//抽离的方针路径
minChunks:2 //最小抽离文件数，一般为2
}) 静态资源打包 npm install --save-dev copy-webpack-plugin
?
const copyWebpackPlugin = require("copy-webpack-plugin")
?
new copyWebpackPlugin([{
from:__dirname+‘src/public‘,
to:‘./public‘
}])
?
，
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30298.html
- 上一篇：其中包含了以冒号分隔的字段和值的对(如
- 下一篇： 如下图：在二叉查找树中
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")