使用第三库:
1. 直接npm下载,然后引入(完全可以使用,但是我个人不是很推荐)
cnpm i jquery -S
import $ from 'jquery'
$(xxxx).on()
$(xxx).css()
-
ProvidePlugin (个人推荐此方式)
const webpack = require('webpack'); 在plugins里面使用: plugins:[ new Webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ title:'Hello World', template: './src/index.html' //模板地址 }), new Webpack.ProvidePlugin({ //下载Jquery库 $:'jquery' }) ]
通过ProvidePlugin和 import直接引入区别:
1. import $...,引入之后,无论你在代码中是否使用jquery,打包后,都会打进去,这样其实产生大量的冗余js
2. Provideplugin, 只有你在使用到此库,才会打包
提取第三方库(或者想单独提出来的)js库,增加一个optimization配置,和plugins同级
在webpack3.x版本之前:使用new webpack.optimize.CommonsChunkPlugin现在已经不支持
new webpack.optimize.CommonsChunkPlugin({
name:'jquery'
})
-
在webpack4.x以后提取第三方库或js单独引入html使用如下方法
1.配置入口文件
entry:{
entry: jsonConfig.entry,
jquery:'jquery',
angular:'angular'
},
2.下载库
plugins:[
// Uglify是压缩js,现在已经不需要了,只需要在script里面写成
// "build": "webpack --mode production", 就自动压缩额
//new Uglify(),
new Webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title:'Hello World',
template: './src/index.html' //模板地址
}),
new ExtractTextPlugin('css/index.css'), //都提到dist目录下的css目录中,文件名是index.css里面
new PurifyCssWebpack({ //消除冗余代码
// 首先保证找路径不是异步的,所以这里用同步的方法
// path.join()也是path里面的方法,主要用来合并路径的
// 'src/*.html' 表示扫描每个html的css
paths:glob.sync(path.join(__dirname,'src/*.html'))
}),
new CopyWebpackPlugin([ //支持输入一个数组
{
from: path.resolve(__dirname, 'src/assets'), //将src/assets下的文件
to: './public' // 复制到publiv
}
]),
new Webpack.ProvidePlugin({
$:'jquery', //下载Jquery
A:'angular' // 下载Angular
})
],
3.分离单独JS,注意:optimization和Plugins是同级,而不是在Plugins内
plugins:[
// Uglify是压缩js,现在已经不需要了,只需要在script里面写成
// "build": "webpack --mode production", 就自动压缩额
//new Uglify(),
new Webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title:'Hello World',
template: './src/index.html' //模板地址
}),
new ExtractTextPlugin('css/index.css'), //都提到dist目录下的css目录中,文件名是index.css里面
new PurifyCssWebpack({ //消除冗余代码
// 首先保证找路径不是异步的,所以这里用同步的方法
// path.join()也是path里面的方法,主要用来合并路径的
// 'src/*.html' 表示扫描每个html的css
paths:glob.sync(path.join(__dirname,'src/*.html'))
}),
new CopyWebpackPlugin([ //支持输入一个数组
{
from: path.resolve(__dirname, 'src/assets'), //将src/assets下的文件
to: './public' // 复制到publiv
}
]),
new Webpack.ProvidePlugin({
$:'jquery',
A:'angular'
})
],
optimization:{
splitChunks:{
cacheGroups:{ // 单独提取JS文件引入html
aaa:{ // 键值可以自定义
chunks:'initial', //
name:'jquery', // 入口的entry的key
enforce:true // 强制
},
bbb:{
chunks:'initial',
name:'angular',
enforce:true
}
}
}
}