更新日志
2018-12-05
- 提高热更新速度
- 修改html文件也触发热更新
逼逼两句
关于webpack是什么，这里不多说，webpack官方文档，让我直接进入正题吧!
1.最基础的配置
新建一个文件夹，就叫webpack吧，先安装主要依赖
npm install webpack webpack-cli --save-dev
让我们试试打包一个javascript文件看看，在src目录下创建index.js、message.js文件，在根目录创建index.html文件
message.js
export default function (message) {
console.log(message)
}
index.js
import message from './message.js'
message('大家好，我是message函数')
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的第一个webpack程序</title>
</head>
<body>
<script src="boundle.js"></script>
</body>
</html>
现在当然没有boundle.js文件啦，让我们用webpack将src/index.js打包成boundle.js吧
在根目录创建webpack入口文件webpack.config.js
webpack.config.js
module.exports = {
// 入口
entry: './src/index.js',
// 输出
output: {
filename: 'boundle.js', // 文件名
path: __dirname // 输出路径
}
}
怎么运行呢？如果webpack、webpack-cli安装到了全局环境，那么直接在命令行直接输入webpack就可以进行打包了，现在我们webpack、webpack-cli是安装到了项目依赖中，所以得稍微配置一下
package.json
{
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
},
"scripts": {
"build": "webpack"
}
}
现在我们执行npm run build就相当于执行webpack命令了
npm run build
现在你可以看到，根目录下生成了个boundle.js文件，现在打开index.html，看控制台输出"大家好，我是message函数"
2. 打包自动生成html
意思就是，我们执行npm run build之后，可以自动生成index.html、index.js，并且该html里面自动引入index.js，现在我们可以把根目录下的index.html删掉了，以后用不上
安装依赖，html-webpack-plugin
npm install html-webpack-plugin --save-dev
webpack.config.js
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'index.js', // 输出之后的js文件名
path: __dirname + '/dist' // 输出路径，一般我们输出到dist文件夹
},
// 使用插件
plugins: [
// 生成html
new HtmlWebpackPlugin({
filename: 'index.html',
title: '我是主页的标题',
}),
]
}
现在运行
npm run build
可以看到在根目录下生成了dist文件夹
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是主页的标题</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script></body>
</html>
3. 模板文件
新建template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我是模板文件</title>
</head>
<body></body>
</html>
配置
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './template.html'
}),
]
4. 使用css
可以使javascript脚本中引入css文件，并且写入到html
npm install style-loader css-loader --save-dev
配置
module.exports = {
module: {
rules: [{
test: /\.css$/, // 匹配.css文件
use: ['style-loader', 'css-loader'] // 使用插件
}]
},
}
// index.js
import message from './message.js'
import './index.css'
message('大家好，我是message函数')
执行打包，打开生成的index.html文件，F12调试
可以看到自己写的css文件被javascript写入到head中，那如果你想像javascript文件一样外联的形式引入，该怎么做呢？
5. 分离css
npm install extract-text-webpack-plugin@next --save-dev
配置
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}]
},
plugins: [
new ExtractTextWebpackPlugin('index.css')
]
}
执行打包
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是主页的标题</title>
<link href="index.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="index.js"></script></body>
</html>
6. 多页面入口
以上都是单页面入口，只允许配置一个html文件以及对应的javascript、css，那么如何配置多个页面呢？
配置
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
index: './src/index.js',
about: './src/about.js'
},
output: {
filename: '[name].js?[hash]', // 生成的名字由entry中的属性决定，并且加上了版本号
path: __dirname + '/dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
title: '我是主页的标题',
chunks: ['index']
}),
new HtmlWebpackPlugin({
filename: 'about.html',
title: '我是关于我们页面的标题',
chunks: ['about']
}),
]
}
执行打包
7. 多页面分离css
只需要把css名字动态化即可
index.js
import message from './message.js'
import './index.css'
message('大家好，我是主页')
about.js
import message from './message.js'
import './about.css'
message('大家好，我是关于我们')
配置
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}]
},
plugins: [
new ExtractTextWebpackPlugin('[name].css'), // css文件名字动态化
]
}
打包后，看dist文件夹目录
8. css浏览器自动补全前缀
npm install postcss-loader autoprefixer --save-dev
在根目录新建postcss.config.js文件
module.exports = {
plugins: [require('autoprefixer')]
}
配置（css不分离写法）
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}]
}
}
配置（css分离写法）
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader']
})
}]
}
}
9. babel
babel可以把es最新标准的代码转为es5代码，首先需要安装babel-core、babel-loader（7.1.5版本）、以及转换版本babel-preset-env
npm install babel-loader@7.1.5 babel-core babel-preset-env --save-dev
配置
module.exports = {
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
cacheDirectory: true
}
}
}]
}
}
写一段ES6代码测试一下
import message from './message.js'
import './index.css'
let name = '主页'
message(`大家好，我是${name}`)
执行打包
10. API转换
babel默认只转换JavaScript语法，对于新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等是不会转换的。如果需要转换API，需要使用babel-polyfill
安装依赖
npm install babel-polyfill --save-dev
在你的javascript文件顶部引入
import 'babel-polyfill';
let set = new Set([1,2,3]);
11. 图片资源
webpack处理图片、字体、音乐、视频等资源时（javascript中require，css的背景图设置等），需要安装file-loader
cnpm install file-loader --save-dev
配置
module.exports = {
module: {
rules: [{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}]
}
}
执行打包
12. 清除dist文件夹
每次打包前都能自动清除dist文件夹下的文件
npm install clean-webpack-plugin --save-dev
配置
let CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin(['dist'])
]
}
13. 分文件夹管理
现在打包之后dist文件夹，太乱了，我们需要在里面用css、js、images文件夹进行分类管理
配置
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
module.exports = {
output: {
filename: 'js/[name].js', // 在文件名前面加上目录名称即可实现
},
module: {
rules: [{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]',
outputPath: 'images' // 配置图片生成的目录
}
}]
},
plugins: [
new ExtractTextWebpackPlugin('css/[name].css') // 配置css文件生成的目录
}
执行打包
舒服多了
14. 压缩分离出来的css文件
大家应该发现了，javascript文件自动压缩了，无需配置，但是分离出来的css文件没有自动压缩
npm install optimize-css-assets-webpack-plugin --save-dev
配置
let OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
plugins: [
new OptimizeCssAssetsPlugin()
]
}
15. 开启本地服务器，并且设置热更新
热更新是webpack的一个特性，通过无刷新实现代码更新
npm install webpack-dev-server --save-dev
package.json
{
"scripts": {
"dev": "webpack-dev-server"
}
}
配置
let webpack = require('webpack')
module.exports = {
mode: 'development', // 开发模式，热更新速度提高
plugins: [
new webpack.HotModuleReplacementPlugin() // 启用HMR
],
devServer: {
contentBase: __dirname + '/dist', // 默认目录
port: 3000, // 端口
open: true, // 运行时自动在浏览器打开
hot: true // 开启热更新
}
}
启动服务（是不是感觉像极了vue-cli项目）
npm run dev
然后浏览器会自动打开http://localhost:3000
默认访问index.html
输入http://localhost:3000/about.html访问关于我们
注意，现在修改javascript，css代码才能触发热更新（css不分离模式才触发），html模板文件则不能
16. 让修改html模板文件也触发热更新（必须要有模板文件）
npm install raw-loader --save
新增配置
let webpack = require('webpack')
module.exports = {
module: {
rules: [{
test: /\.(htm|html)$/,
use: [
'raw-loader'
]
}]
},
}
在入口文件导入模板文件
import '../index.html'
点击下载模板(暂无添加修改html文件的代码，自己看着第16步自行添加喔)
最后
本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个赞跟关注哦 💨
微信公众号
「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注，一起学习 🌘
