webpack 3.X 学习笔记(一)

前言

不知不觉,webpack现在已经更新到3.8了,新版本增加了几种新功能,打包速度据说也大大提升,因为之前使用和配置的webpack都是2.0以下的,所以想紧跟大部队,继续学习新版本的webpack,顺便做些笔记

—12月3号更新—

完善webpack打包配置文件,更全面,更高效

前期准备

  • 1.npm install webpack -g (全局安装)
  • 2.创一个文件夹, npm init 然后接着npm install webpack –save-dev (局部安装)
  • 3.分别创建dist, src两个文件夹
  • 4.在根目录下创建webpack.config.js
  • 5.插件按需安装

配置webpack.config.js

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
const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const UglifyJs = require('uglifyjs-webpack-plugin'); // 代码压缩插件
const htmlPlugin = require('html-webpack-plugin'); // html引入文件插件
const extractTextPlugin = require('extract-text-webpack-plugin'); // 把css从js文件中分离出来插件
const PurifyCSSPlugin = require('purifycss-webpack'); // 消除没用到的css
const website = {
publicPath: "http://localhost:8081/"
}
module.exports = {
entry: {
entry:'./src/entry.js',
// entry2:'./src/entry2.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: '[name].js', //对应entry的属性名
publicPath: website.publicPath // 改为绝对路径
},
module: {
// style-loader(处理路径),css-loader(处理标签)
rules:[
{
test: /\.css$/,
// use: ['style-loader','css-loader']
//
use: extractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader", options: {importLoaders: 1}
},"postcss-loader"]
})
},{
test:/\.(png|jpg|gif)/,
use:[{
// url-loader主要把图片打包成base64
// 配合file-loader使用,file-loader可以解决引用路径的问题
loader:'url-loader',
options:{
limit: 5000, //小于500000就生成base64
outputPath: 'images/'
}
}]
},{
test:/\.(htm|html)$/i,
use:['html-withimg-loader']
},
{
test: /\.less$/,
// less和scss配置方法一样
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
},"postcss-loader",{
loader: "less-loader"
},],
fallback: "style-loader"
})
},{
test:/\.js$/,
use:{
loader: 'babel-loader'
},
exclude: /node_modules/
}
]
},
plugins: [
// new UglifyJs(), // 压缩代码
new htmlPlugin({
minify:{
removeAttributeQuotes: true
},
hash: true, // 哈希,不产生缓存
template: './src/index.html' // 入口文件
}),
// 把css文件从js中分离
new extractTextPlugin("css/index.css"),
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname,"src/*.html"))
})
],// 插件
devServer: {
contentBase:path.resolve(__dirname,'dist'),
host:'localhost',
compress:true,// 是否启用服务器压缩
port:8081 // 端口
}
}

我比较喜欢代码+注释这种方式来记录笔记,这样看起来不会那么乏味

最后,在package.json的scripts中添加”server”: “webpack-dev-server”
这个主要是可以通过npm run server方式来开启webpack提供的服务,热更新在新版本的webpack已经默认开启了

新增

使用css自动补全前缀插件,和babel编译插件,需要在文件根目录下,也就是和webpack.config.js同一路径下,分别创建.postcss.config.js.babelrc配置文件

.postcss.config.js文件中,编写

1
2
3
4
5
module.exports = {
plugins: [
require('autoprefixer')
]
}

.babelrc文件中,编写

1
2
3
4
5
{
"presets": [
"env"
]
}

使用babel需要安装的插件有babel-core babel-preset-env
以后还可以使用babel-plugin-transform-runtime这个比较有用的插件

注意

在webpack配置文件里,module里面用到的loader,plugins里面用到的插件,都需要用npm安装,如果网速不给力,可以使用cnpm或者配置npm

1
2
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

本篇小结

webpack3.0往后的版本配置简洁了不少,蛮好的,这篇暂时就写这么多,有空会继续更新~

文章作者: Rao Jinwei
文章链接: http://shooterblog.site/2017/11/27/webpack 3.X 学习笔记(一)/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明来自 Rao Jinwei's Blog