您的位置：首页 > Web前端 > Webpack

webpack3最新版本配置研究（一）loader

2017-10-12 19:44 633 查看
webpack这货还是挺火的,目前前端不管是react和vue都用这个打包,还是挺好用的，本文刚开始写的是webpack2，但后来发现webpack3可以无伤升级就升级了下，据说webpack3相对于2的生成的代码运行速度更快！在家里装了个最新版本的nodejs8.4.0，附带的npm是5.3.0的，有的时候install的时候会爆Cannot read property ‘0’ of undefined，目前的办法是npm install -g npm@5.2.0退级，或者安装nodejs6的稳定版，之后可能会处理这个bug


什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。


WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

webpack的安装和其他的npm包类似
npm init  //一路回车,这里要注意name最好不要取什么webpack，grunt，glup之类的，不然可能会爆refusing to install xxxx as a dependency of itself

//全局安装
npm install -g webpack
//安装到你的项目目录，最好制定一个版本号
npm install --save-dev webpack@3.4.0
1
2
3
4
5
6

首先是最简单的webpack打包
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="parent">

</div>
</body>
<script src="bundle.js"></script>
</html>

//index.js
const divItem = require('./div');
document.getElementById('parent').appendChild(divItem());

//div.js
module.exports = () => {
const divDom = do
4000
cument.createElement('div');
divDom.textContent = 'write something';
return divDom;
}

//webpack.config.js
module.exports = {
// 打包文件的存放地址
entry: __dirname + "/index.js",
output:{
// 打包后存放地址
path: __dirname,
// 输出后的文件名
filename: 'bundle.js'
}
}

//package.json中将scripts修改，npm run webpack命令会调用webpack命令行
"scripts": {
"webpack":"webpack"
}
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

然后在当前文件夹使用命令行输入npm run webpack 就可以将index的文件和他的require全都打到bundle中了，首先先执行了npm中的script调用了webpack命令，webpack命令直接执行了webpack.config.js中的配置，将index.js打包到bundle文件里引入

Loader 

webpack通过调用外部的脚本可以对各种文件进行处理，把下一代的ES6，ES7转换为ES5。或者说对React的开发而言，可以把React的JSX文件转换为JS文件。也可以将css打包到js中，例如style和css的loader，在webpack1中loader在module中是用loaders字段的，在webpack2中使用的是rules字段

babel 

babel是loader中比较重要的，用来将es6和es7转换成es5来进行浏览器的展示，用下列命令安装它们 

npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
module: {
rules: [
{
test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
loader: "babel-loader"
}
]
}

//创建一个.babelrc,webpack中的babel会自动调用该文件的配置到babel中转换js
{
"presets": ["react", "es2015"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13

这时再运行下npm run webpack之后，发现之前index和div中的const写法被转换成es5的var了

cssloader 

用来解析js中引入的css和sass，老规矩 

npm install –save-dev style-loader css-loader
//webpack.config.js中修改module
module: {
rules: [
{
test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"//添加对样式表的处理
}
]
}

//生成一个index.css文件来添加一些样式
#parent{
color: red;
}

//index.js中添加样式
require('./index.css');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

执行npm run webpack之后打开index.html是不是字体变红了呢？


接上面的loader

url-loader 

现在来我们来试试加载图片，第一件事情肯定是安装对应的loader，可以将小图片转换成base64，减少请求 

npm install url-loader file-loader –save-dev
//修改index.html加两个div，背景图片设置成两张图片，一个小的，一个大的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="parent">
<div id="a"></div>
<div id="b"></div>
</div>
</body>
<script src="bundle.js"></script>
</html>

//index.css增加
#parent{
color: red;
}

#a{
background-image: url(img/1.png);
height:10px;
width:10px;
}

#b{
background-image: url(img/avatar.jpg) ;
background-size:100% 100%;
height:50px;
width:50px;
}

//增加webpack.config.js中的loader
module: {
rules: [
{
test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"//添加对样式表的处理
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
}
]
}
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

新建一个img文件夹，在里面放置一个小于8k的图片1.png，一个大于8k的图片avatar.jpg，修改好之后输入npm run webpack，可以看到小于8k的图片被转换成了base64，而大的图则通过file-loader直接引入了图片，并加上了hash的值 



sass-loader 

先安装下相关的依赖 npm install –save-dev sass-loader node-sass //需要两个一起装，单装一个node-sass好像会报错
//新建一个scss文件夹新建一个index.scss文件,注意是scss，scss，scss
$length: 50px;
#a{
width: $length;
height: $length;
}

//index.js中增加scss的引用
require('./scss/index.scss');

webpack.config.js
module: {
rules: [
{
test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
loader: "babel-loader"
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"//添加对样式表的处理
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
}
],
}
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

继续npm run webpack，可以发现scss文件被打包打进去了，宽高40px替换掉了之前的10px

less-loader 

npm install less less-loader –save-dev
//新建一个less文件夹新建一个index.less文件
@borderlength: 2px;
#b{
border: @borderlength solid red;
}

//index.js中引入less文件
require('./less/index.less');

//webpack.cofig
module: {
rules: [
{
test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
loader: "babel-loader"
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"//添加对样式表的处理
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
}
],
}
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

json-loader 

npm install json-loader –save-dev
// webpack.config.js中增加
module: {
rules: [
{test: /\.json$/,loader: 'json'},
]
}
1
2
3
4
5
6

postcss 

postcss感觉弄起来还是有点复杂的 

npm install postcss-loader autoprefixer –save-dev
//新建一个postcss。config.js的配置文件
module.exports = {
plugins: [
require('autoprefixer')
]
}

//修改webpack.config.js中需要使用postcss的css文件中的loader，以scss为例
//头部因如下
const autoprefixer = require('autoprefixer');

//修改module
{
test: /\.scss$/,
// loader: 'style-loader!css-loader!sass-loader!postcss-loader'
use: [
{ loader: 'style-loader'},
{ loader: 'css-loader'},
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer(
{ browsers: ['iOS >= 7', 'Android >= 4.1',
'last 10 Chrome versions', 'last 10 Firefox versions',
'Safari >= 6', 'ie > 8']
}
)],
},
},
'sass-loader'
]
}

//index.scss中随便加点需要兼容的css样式
$radius: 10px;
#b{
display:flex;
border-radius: $radius;
transform: scale(0.8);
}
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

用webpack打包之后生成的头部自动打上了一些兼容的css，是不是很方便呢？ 



webpack.config.js汇总
const autoprefixer = require('autoprefixer');
module.exports = {
entry: __dirname + "/index.js",
output:{
path: __dirname,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
loader: "babel-loader"
},
{
test: /\.scss$/,
// loader: 'style-loader!css-loader!sass-loader!postcss-loader'
use: [
{ loader: 'style-loader'},
{ loader: 'css-loader'},
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer(
{ browsers: ['iOS >= 7', 'Android >= 4.1', 'last 10 Chrome versions', 'last 10 Firefox versions', 'Safari >= 6', 'ie > 8'] }
)],
},
},
'sass-loader'
]
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
}
],
}
}
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

获取更多webpack-loader
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  webpack webpack3
相关文章推荐
新的分享
章节导航