学习React，你必须知道的Webpack配置！
2018-02-07 11:44
591 查看
学习react，就要配套去学Webpack。初始并不明白Webpack是什么，是干什么的。后来对比之前Angular的项目，才明白，Webpack干的活跟gulp是一样的。从网上搜到了一个国外的大神写的blog，跟着一步一步配置，受益颇多。我按照自己的理解，做了简单的整理。
将多个HTML文件，整合为一个HTML文件，并压缩
优化图片
将Sass编译为CSS并压缩
结合Babel编译JS文件，并压缩
监听文件变化并在保存时重新编译，刷新页面（通过Webpack Dev Server）
首先，我们要新建一个文件夹，进行项目初始化，做一些简单的配置。
然后，在项目文件夹中，创建一些必要的文件夹： js,img,_scss。
通过指令初始化 package.json ，安装webpack
npm init -y
npm i webpack --save-dev
在初始化的 package.json 中添加指令：
准备工作结束！
这时，就需要loaders了。可以把loaders理解为是“转换器”。
下载HTML的loaders：
安装的同时，就在根目录下创建一个配置文件 webpack.config.js 。这个文件相当重要，因为当运行webpack项目的时候，
会自动去找一个配置文件，就是这个文件。
初始化会有一些基础的配置：
重点：
entry: 指定项目入口js文件
output: webpack打包后的js文件路径及名称
module and rules: 配置不同文件格式loaders的地方
plugins: 配置webpack需要依赖的插件的地方
做好以上的配置，就可以创建 ./src/index.html 文件
<!DOCTYPE html>
<html
lang="it">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<title>Webpack</title>
</head>
<body>
<section
class="main">
<h1>Hello
Webpack!!</h1>
</section>
</body>
</html>
创建 ./src/index.js文件：
console.log(`I've
been required by Webpack`);
然后控制台执行指令：
npm run build
执行成功后，会发现项目根目录下多了一个 build 文件夹，以及压缩后的index.html , index,js文件
浏览器运行这个index.html，可以看到页面及控制台：
npm i img-loader url-loader file-loader --save-dev
[b]img-loader [/b]是优化图片的loader。
url-loader 是当图片在指定大小下会转换为一个Base64 URL。
加载 Base64 URL的图片的好处在于：浏览器不用加载外部的图片。但是也有限制：太大的图片不能通过Base64 URL 的形式加载。
接下来，自己找两个图片，一个大点的（1.png）一个小点的（2.png），放到img文件夹里，引入index.html中:
<!DOCTYPE html>
<html
lang="it">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<title>Webpack</title>
</head>
<body>
<section
class="main">
<h1>Hello
Webpack!!</h1>
<img
src="img/1.png">
<img
src="img/2.png">
</section>
</body>
</html>
webpack.config.js 文件中更新下，增加图片的loader配置：
const HtmlWebPackPlugin
= require("html-webpack-plugin");
const path
= require("path");
module.exports
=
{
entry:
["./src/js/index.js"],
output:
{
filename:
"js/index.js",
path:
path.join(__dirname,
"./build/")
},
module:
{
rules:
[
{
test:
/\.html$/,
use:
[{
loader:
"html-loader",
options:
{ minimize:
true
}
}]
},
{// 新增的，对图片编译的配置
test:
/\.(png|jpe?g)/i,
use:
[
{
loader:
"url-loader",
options:
{
name:
"./img/[name].[ext]",
limit:
10000
}
},
{
loader:
"img-loader"
}
]
}
]
},
plugins:
[
new
HtmlWebPackPlugin({
template:
"./src/index.html",
filename:
"./index.html"
})
]
};
然后运行指令 npm run build，结束后刷新index.html页面，观察控制台，可以看到小图片2.png转为Base64 URL格式了。
3.将Sass编译为CSS并压缩
这个过程，除了css loader，还需要ExtractTextPlugin
插件
npm i css-loader sass-loader postcss-loader node-sass extract-text-webpack-plugin --save-dev
webpack.config.js 更新，添加css loader 配置：
创建一个sass文件：./src/_scss/main.scss
$color-orange: #f98a09;
.main
{
background:
$color-orange;
display:
flex;
flex-direction:
row;
flex-wrap:
wrap;
justify-content:
center;
align-items:
center;
}
还需要另外一个配置文件： ./src/_scss/postcss.config.js
module.exports
=
{
plugins:
[require("autoprefixer")]
};
然后，在packgage.json 里添加浏览器配置：
"browserslist":
["last
2 versions"]
然后运行指令： npm run build, 重新刷新index.html，可以看到页面已经有了样式。
4.结合Babel编译JS文件，并压缩
现在已经是ES6的时代了，但是并不是所有的浏览器都认识ES6的语法，所以出现了Babel，转译ES6为ES5，让浏览器都能运行。同样的，也需要loader：
npm i babel-core babel-loader babel-preset-env --save-dev
然后更新webpack.config.js文件：
{//添加到rules 数组中
test:
/\.js$/,
use:
{
loader:
"babel-loader",
options:
{
presets:
["env"]
}
}
}
这时，我们就可以在 ./src/js/index.js 文件里写ES6语法了：
console.log(`I've
been required by Webpack`);
import
'./es6code';
// 新增
在同路径下，新建一个js文件：./src/js/es6code.js
(()
=>
{
const
IAmES6 =
`I've been transpiled by Babel`;
console.log(IAmES6);
})();
运行 npm run build，刷新 index.html，可以在控制台看到输出
"scripts":
{
"build":
"webpack",
"watch":
"webpack --watch"
}
但是我们可以用Webpack Dev Server 做的更好。
Webpack Dev Server 到底做了什么呢？
它只需要行配置就可以启动并运行一个开发服务器。一旦配置好，你就会运行一个npm 脚本，Webpack将会在浏览器中启动你的项目。
安装Webpack Dev Server
npm i webpack-dev-server --save-dev
然后更新 webpakc.config.js文件：在output 声明下添加下面的配置
devServer:
{
contentBase:
"./build"
}
在package.json更新指令：
"scripts":
{
"start":
"webpack-dev-server --open",
"build":
"webpack",
"watch":
"webpack --watch"
}
然后执行 npm start ，奇迹发生了，项目在浏览器自动启动在 localhost：8080，并且，项目代码改变时，代码自动重新编译，页面会自动刷新。
以上是针对国外大神的blog翻译整理的，原文链接：
将多个HTML文件，整合为一个HTML文件，并压缩
优化图片
将Sass编译为CSS并压缩
结合Babel编译JS文件，并压缩
监听文件变化并在保存时重新编译，刷新页面（通过Webpack Dev Server）
首先，我们要新建一个文件夹，进行项目初始化，做一些简单的配置。
mkdir webpack-demo
然后，在项目文件夹中，创建一些必要的文件夹： js,img,_scss。
通过指令初始化 package.json ，安装webpack
npm init -y
npm i webpack --save-dev
在初始化的 package.json 中添加指令：
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
}准备工作结束！
1.将多个HTML文件，整合为一个HTML文件，并压缩
与gulp不同，webpack是专门针对JavaScript的，所以它根本不知道怎么处理其他格式的文件。这时，就需要loaders了。可以把loaders理解为是“转换器”。
下载HTML的loaders：
npm i html-webpack-plugin html-loader --save-dev
安装的同时，就在根目录下创建一个配置文件 webpack.config.js 。这个文件相当重要，因为当运行webpack项目的时候，
会自动去找一个配置文件，就是这个文件。
初始化会有一些基础的配置：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: ["./src/js/index.js"],// 重要
output: {//重要
filename: "js/index.js",
path: path.join(__dirname, "./build/")
},
module: {
rules: [// 规则这里，配置不同文件类型的loader
{
test: /\.html$/,
use: [{ loader: "html-loader", options: { minimize: true } }]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};重点：
entry: 指定项目入口js文件
output: webpack打包后的js文件路径及名称
module and rules: 配置不同文件格式loaders的地方
plugins: 配置webpack需要依赖的插件的地方
做好以上的配置，就可以创建 ./src/index.html 文件
<!DOCTYPE html>
<html
lang="it">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<title>Webpack</title>
</head>
<body>
<section
class="main">
<h1>Hello
Webpack!!</h1>
</section>
</body>
</html>
创建 ./src/index.js文件：
console.log(`I've
been required by Webpack`);
然后控制台执行指令：
npm run build
执行成功后，会发现项目根目录下多了一个 build 文件夹，以及压缩后的index.html , index,js文件
浏览器运行这个index.html，可以看到页面及控制台：
2.优化图片
添加依赖：npm i img-loader url-loader file-loader --save-dev
[b]img-loader [/b]是优化图片的loader。
url-loader 是当图片在指定大小下会转换为一个Base64 URL。
加载 Base64 URL的图片的好处在于：浏览器不用加载外部的图片。但是也有限制：太大的图片不能通过Base64 URL 的形式加载。
接下来，自己找两个图片，一个大点的（1.png）一个小点的（2.png），放到img文件夹里，引入index.html中:
<!DOCTYPE html>
<html
lang="it">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<title>Webpack</title>
</head>
<body>
<section
class="main">
<h1>Hello
Webpack!!</h1>
<img
src="img/1.png">
<img
src="img/2.png">
</section>
</body>
</html>
webpack.config.js 文件中更新下，增加图片的loader配置：
const HtmlWebPackPlugin
= require("html-webpack-plugin");
const path
= require("path");
module.exports
=
{
entry:
["./src/js/index.js"],
output:
{
filename:
"js/index.js",
path:
path.join(__dirname,
"./build/")
},
module:
{
rules:
[
{
test:
/\.html$/,
use:
[{
loader:
"html-loader",
options:
{ minimize:
true
}
}]
},
{// 新增的，对图片编译的配置
test:
/\.(png|jpe?g)/i,
use:
[
{
loader:
"url-loader",
options:
{
name:
"./img/[name].[ext]",
limit:
10000
}
},
{
loader:
"img-loader"
}
]
}
]
},
plugins:
[
new
HtmlWebPackPlugin({
template:
"./src/index.html",
filename:
"./index.html"
})
]
};
然后运行指令 npm run build，结束后刷新index.html页面，观察控制台，可以看到小图片2.png转为Base64 URL格式了。
3.将Sass编译为CSS并压缩
这个过程，除了css loader，还需要ExtractTextPlugin插件
npm i css-loader sass-loader postcss-loader node-sass extract-text-webpack-plugin --save-dev
webpack.config.js 更新，添加css loader 配置：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //新加
const path = require("path");
module.exports = {
entry: ["./src/js/index.js", "./src/_scss/main.scss"],
output: {
filename: "js/index.js",
path: path.join(__dirname, "./build/")
},
module: {
rules: [
{
test: /\.html$/,
use: [{ loader: "html-loader", options: { minimize: true } }]
},
{
test: /\.(png|jpe?g)/i,
use: [
{
loader: "url-loader",
options: {
name: "./img/[name].[ext]",
limit: 10000
}
},
{
loader: "img-loader"
}
]
},
{//新加
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: "css-loader",
options: { minimize: true }
},
{ loader: "postcss-loader" },
{ loader: "sass-loader" }
]
})
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new ExtractTextPlugin({//新加，知道编译后的文件路径及名称
filename: "css/main.css"
})
]
};创建一个sass文件：./src/_scss/main.scss
$color-orange: #f98a09;
.main
{
background:
$color-orange;
display:
flex;
flex-direction:
row;
flex-wrap:
wrap;
justify-content:
center;
align-items:
center;
}
还需要另外一个配置文件： ./src/_scss/postcss.config.js
module.exports
=
{
plugins:
[require("autoprefixer")]
};
然后，在packgage.json 里添加浏览器配置：
"browserslist":
["last
2 versions"]
然后运行指令： npm run build, 重新刷新index.html，可以看到页面已经有了样式。
4.结合Babel编译JS文件，并压缩
现在已经是ES6的时代了，但是并不是所有的浏览器都认识ES6的语法，所以出现了Babel，转译ES6为ES5，让浏览器都能运行。同样的，也需要loader：npm i babel-core babel-loader babel-preset-env --save-dev
然后更新webpack.config.js文件：
{//添加到rules 数组中
test:
/\.js$/,
use:
{
loader:
"babel-loader",
options:
{
presets:
["env"]
}
}
}
这时，我们就可以在 ./src/js/index.js 文件里写ES6语法了：
console.log(`I've
been required by Webpack`);
import
'./es6code';
// 新增
在同路径下，新建一个js文件：./src/js/es6code.js
(()
=>
{
const
IAmES6 =
`I've been transpiled by Babel`;
console.log(IAmES6);
})();
运行 npm run build，刷新 index.html，可以在控制台看到输出
5.监听文件变化并在保存时重新编译，刷新页面
虽然在package.json 文件中我们已经添加了监听指令"scripts":
{
"build":
"webpack",
"watch":
"webpack --watch"
}
但是我们可以用Webpack Dev Server 做的更好。
Webpack Dev Server 到底做了什么呢？
它只需要行配置就可以启动并运行一个开发服务器。一旦配置好，你就会运行一个npm 脚本，Webpack将会在浏览器中启动你的项目。
安装Webpack Dev Server
npm i webpack-dev-server --save-dev
然后更新 webpakc.config.js文件：在output 声明下添加下面的配置
devServer:
{
contentBase:
"./build"
}
在package.json更新指令：
"scripts":
{
"start":
"webpack-dev-server --open",
"build":
"webpack",
"watch":
"webpack --watch"
}
然后执行 npm start ，奇迹发生了，项目在浏览器自动启动在 localhost：8080，并且，项目代码改变时，代码自动重新编译，页面会自动刷新。
以上是针对国外大神的blog翻译整理的，原文链接：
How to switch from Gulp to Webpack: a tutorial to get you started
文末还提供了一些链接，可以更深入的学习webpack。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- React系列学习笔记：1.React与webpack基本配置
- react初探： webpack.js 配置
- React+webpack 的开发环境配置步骤（三）
- 手把手教你webpack、react和node.js环境配置（上篇）
- webpack入门+react环境配置
- 学习 React(jsx语法) + es2015 + babel + webpack
- webpack配置热加载之react-hot-loader和webpack-dev-server的使用
- 学习建立基于react,webpack模板项目
- FE - 走向Node与Webpack 之路 - 必须知道的 Vue Router ！
- node.js学习之webpack打包react最简单用法
- react 初探：webpack 加载css 使用配置
- React学习实例总结，包含yeoman安装、webpack构建
- webpack react-hot-loader配置
- webpack配置ES6 + react套装开发
- 手把手教你webpack、react和node.js环境配置（上篇）
- react从零到native--npm及webpack学习
- webpack打包调试react并使用babel编译jsx配置方法
- 手把手教你webpack、react和node.js环境配置（上篇）
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
- 前端学习资料，vue angular react webpack es6应有尽有