2019-03-01 | 版本/打包架构工具 | UNLOCK

手撸webpack4.0配置

Project setup

1
npm install

Compiles and hot-reloads for development

1
npm start

基本配置说明都在webpack.config.js中,也放在页面最底部,以下是我在搭建demo时觉得需要注意的问题,记录沉淀下来。

解决Webpack4.0 打包警告问题

1
2
3
4
"scripts": {
"start": " --mode development",
"build": "--mode production"
}

引用CSS文件

extract-text-webpack-plugin插件会将打包到js里的css文件进行一个拆分,打包的html页面就以link的方式去引入css了

1
2
3
4
5
6
7
8
9
10
11
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
// 将css用link的方式引入就不再需要style-loader了
use: 'css-loader'
})
},
plugins: [
// 拆分后会把css文件放到dist目录下的css/style.css
new ExtractTextWebpackPlugin('css/style.css')
]

引用图片

处理图片方面,也需要loader,如果是在css文件里引入的如背景图之类的图片,就需要指定一下相对路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
use: 'css-loader',
publicPath: '../' //在css中指定了publicPath路径这样就可以根据相对路径引用到图片资源了
})
},
{
test: /\.(jpe?g|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 小于8k的图片自动转成base64格式,并且不会存在实体图片
outputPath: 'images/' // 图片打包后存放的目录
}
}
]
}
]
}
}

页面img引用图片

这样再打包后的html文件下img就可以正常引用图片路径了

1
2
3
4
5
6
7
8
9
10
module.exports = {
module: {
rules: [
{
test: /\.(htm|html)$/,
use: 'html-withimg-loader'
}
]
}
}

热更新和自动刷新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// webpack.config.js
let webpack = require('webpack');

module.exports = {
plugins: [
// 热替换,热替换不是刷新
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true,
port: 3000
}
}

// 虽然配置了插件和开启了热更新,但并不会生效,需要在主要的js文件里写入下面这段代码
if (module.hot) {
// 实现热更新
module.hot.accept();
}

上传git忽略node_module等文件

在根目录新建.gitignore文件

1
2
3
4
.DS_Store
node_modules/
dist/
npm-debug.log

全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
module.exports = {
//entry入口文件
// 多页面开发,配置多页面
entry: {
index: './src/js/index.js',
print: './src/js/print.js'
},
// output出口文件
output: {
// [name]就可以将出口文件名和入口文件名一一对应
// 添加hash可以防止文件缓存,每次都会生成4位的hash串
filename: "[name].[hash:4].js", // 打包后会生成index.js和print.js文件
path: path.resolve(__dirname, 'dist'),
// publicPath: "/"
},
// devServer开发服务器配置
devServer: { //webpack-dev-server 能够实时重新加载
contentBase: path.join(__dirname, "dist"),
host: 'localhost', // 默认是localhost
port: 3000,
open: false, // 是否自动打开浏览器
hot: true // 开启热更新
},
// module处理对应模块
module: {
rules: [
// 处理html文件图片引入问题
{
test: /\.(htm|html)$/,
use: 'html-withimg-loader'
},
//处理css||less||sass
{
//test 用于标识出应该被对应的 loader 进行转换的某个或某些文件。
//use 表示进行转换时,应该使用哪个 loader。
test: /\.(sa|sc|c)ss$/,
use: ExtractTextWebpackPlugin.extract({
use: [
{loader: 'css-loader'},
{loader: 'sass-loader'},
//引入postcss-loader
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: ['ie >= 8', 'Firefox >= 20', 'Safari >= 5', 'Android >= 4', 'Ios >= 6', 'last 4 version'],
remove: true
})
]
}
}
],
publicPath: '../'
})
},
//加载图片
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8192, // 小于8k的图片自动转成base64格式,并且不会存在实体图片
outputPath: 'images/' // 图片打包后存放的目录
}
}
]
},
//加载字体
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
},
//加载数据
{
test: /\.(csv|tsv)$/,
use: ['csv-loader']
},
{
test: /\.xml$/,
use: ['xml-loader']
},
//转义ES6兼容低版本浏览器
{
test: /\.js$/,
use: ['babel-loader'],
include: /src/, //只转化src目录下的js
exclude: /noder_modules/ //排除掉node_modules,优化打包速度
}
]
},
// plugins对应的插件
plugins: [
// 在npm start命令下,打包的文件存在于内存中,并不会产生在dist目录下
new CleanWebpackPlugin(['dist']), //打包之前清理dist文件夹里面多余的文件,npm start时会清理掉dist

new webpack.NamedModulesPlugin(),
// 热替换,热替换不是刷新
new webpack.HotModuleReplacementPlugin(),

new HtmlWebpackPlugin({ //设定HtmlWebpackPlugin,默认生成index.html
template: './src/html/index.html', //模板文件路径所在位置
filename: 'index.html',
chunks: ['index'], //对应的文件 =>对应关系,index.js对应的是index.html
hash: true //会在打包好的js后面加上hash串
}),
new HtmlWebpackPlugin({
template: './src/html/print.html',
filename: 'print.html',
chunks: ['print'],
hash: true
}),
// 拆分后会把css文件放到dist目录下的css/style.css
new ExtractTextWebpackPlugin('css/style.css')
],

// resovle解析,配置别名和省略后缀名
resolve: {
//别名
/*
alias: {
$: './src/jquery.js'
},
*/
// 省略后缀
extensions: ['.js','.json','.css']
}
};

评论加载中

上一页 下一页