webpack 4.x 需要额外安装 webpack-cli
css 单独打包时插件变动
对于非模块化的插件,直接在index.html中使用cdn引入
1.webpack.ProvidePlugin
申明变量并自动引入,前提是该插件已经模块化
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
2.html-webpack-plugin
把entry中的入口js 和 extract-text-webpack-plugin 或者 webpack4.x的 mini-css-webpack-plugin
打包成的一个css 生成link和script标签导入 index.html中
可以指定 chunks 配置多页面多入口的打包
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', //源模板
template: 'index.html' //生成之后
]
//
entry:{
ma: './src/ma',
mb: './src/mb'
},
output: {
path: './dist',
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin({
title: '模板A',
chunks: ['ma']
}),
new HtmlWebpackPlugin({
filename: 'mb.html',
title: '模板B',
chunks: ['mb']
})
]
还要注意:
(1).在源文件中不需要引入 script和link,只需在入口 js中 import
(2).发布之前需要配置 <base href> 指定引用路径
3.extract-text-webpack-plugin 和 webpack4.x 的mini-css-webpack-plugin
把所有引入的css打包成一个css
用css-loader编译css文件,或者其他的sass-loader
用style-loader提取
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader","sass-loader"]
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
**** 在webpack4.x中使用
注意 loader在use中是从右到左执行的
module:[
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
],
plugins: [
new MiniCssExtractPlugin("main.css")
]
4.url-loader的使用
css中字体,图片等路径等问题
{
test: /\.(jpeg | png)$/,
use: {
loader:'url-loader',
options:{
limit:"20000" //大约 20kb的图片会转换成base64直接放在css中
outputPath:'img/' //被处理过的图片的输出位置
}
}
}
5.使用es6或者typescript
(1).使用typescript
npm install --save-dev typescript ts-loader
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
(2).使用es6
npm install --save-dev babel-loader babel-core
npm i -D babel-preset-es2015
{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname,"./node_modules"),
options: {
'presets': ['es2015']
}
}