接上篇webpack4系列第一篇，先来看下上篇的目录结构：
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^2.0.2",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1"
}
}
webpack.config.js:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: './src/index.js', //入口文件
output: {
filename: 'bundle.[hash].js', //默认为main.js [hash]是为了避免js缓存
path: path.resolve(__dirname,'./dist') //path为绝对路径，用node path模块转化
},
mode: 'development', //开发模式
devServer:{ //开发服务器配置
port: 3000, //端口号
progress: true, //进度条
contentBase: './dist', //服务默认指向文件夹
open: true //自动打开浏览器
},
plugins:[ //存放插件
new HtmlWebpackPlugin({
template: './src/index.html', //模板
filename: 'index.html', //默认也是index.html
minify: {
removeAttributeQuotes: true, //删除标签属性的双引号
collapseInlineTagWhitespace: true, //打包成一行
},
hash: true, //增加hash，避免缓存
}),
new CleanWebpackPlugin()
]
}
四、css模块的配置
现在我们在src下新建一个style.css,如果你想用link标签在html引入，那么它是不会被打包的，我们需要把它用模块引入。
我们在index.js里用require引入：
require('./style.css')
如果此时执行npm run dev会报错，因为webpack默认只识别js,它不认识css,我们需要用适当的loader进行处理：
安装：
npm i css-loader style-loader -D
webpack.config.js中加入loader：
module: {
rules: [
//css-loader 负责解析@import语法处理css
//style-loader将css插入到head标签中
{ test: /\.css$/, use: ['style-loader','css-loader'] }
]
}
注意use是从右往左执行的，也就是先处理css之后再插入head标签。
loader可以处理css文件也可以处理less、scss等文件，这里以less为例再写一下：
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader'] },
{ test: /\.less$/, use: ['style-loader','css-loader','less-loader'] },
]
}
当然在运行npm run dev前要先安装
npm i less less-loader -D
此时在src下新建一个less文件写点样式，index里跟css文件一样require进去，也是生效的。
如果打包后不想样式插入到style标签，而是想通过link标签来引入呢？那么可以用mini-css-extract-plugin替代style-loader：
安装：
npm install --save-dev mini-css-extract-plugin
webpack.config.js中引入：
...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
module.exports = {
...
plugins:[ //存放插件
...
new MiniCssExtractPlugin({
filename: 'style.css', //抽离的文件名
}),
...
],
module: {
rules: [
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader,'css-loader'] },
{ test: /\.less$/, use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'] },
]
}
}
对于需要兼容的样式，我们还可以用postcss-loader autoprefixer 自动增加前缀。
自动增加前缀
安装：
npm i -D postcss-loader autoprefixer
添加postcss-loader的配置文件postcss.config.js：
module.exports = {
plugins: [require('autoprefixer')]
}
webpack.config.js里添加postcss:
module.exports = {
...
module: {
rules: [
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader,'css-loader', 'postcss-loader'] },
{ test: /\.less$/, use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','less-loader'] },
]
}
...
}
说完了css，接下来我们来看一下js处理。
五、es6转化
install
npm install -D babel-loader @babel/core @babel/preset-env webpack
use:
module: {
rules: [
...
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
...
]
}
我们在index.js中加入一个箭头函数：
...
var f = function () { return 5 }
console.log(f())
...
执行npm run build来看一下,箭头函数已经被转化为普通的函数：
es6内置方法转化：
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime //这个正式环境也要用
在校验js规则里加入 @babel/plugin-transform-runtime：
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins:[
'@babel/plugin-transform-runtime',
]
}
}
}
npm install --save @babel/polyfill
js文件里引入：
require('@babel/polyfill')
后面的文章就不挨个运行截图了，代码我会上传到github，有需要的同学自行查看。https://github.com/laura233/webpack-demo
