webpack
此文档使用webpack版本为 3.4.1,在你自行测试中,可能输出结果与文档中所贴出内容不一致,请以你自己的代码为准
安装
本地安装
npm install –save-dev webpack 或 npm install –save-dev webpack@[version]
全局安装
npm install -g webpack
不推荐使用全局方式安装,将会影响项目中所使用的webpack版本
起步
使用CLI(命令行)
创建一个目录,并初始化package.json
mkdir webpack-test && cd webpack-test
npm init
npm install --save-dev webpack
构建基本目录及文件( / 代表目录)
webpack-test
-- /dist
-- index.html
-- package.json
-- /src
-- index.js
编辑index.js文件
function fun(){
document.write("Hello Webpack");
}
fun();
编辑index.html文件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
<script src='bundle.js' charset='utf-8'></script>
</html>
在终端(工作目录为当前项目目录),输入webpack src/index.js dist/bundle.js,并回车。
在你的终端应该会出现以下类似内容:(内容也许会有差异)
λ webpack src/index.js dist/bundle.js
Hash: 0f97cc36123f295c9fd2
Version: webpack 3.4.1
Time: 260ms
Asset Size Chunks Chunk Names
bundle.js 36.9 kB 0 [emitted] main
[0] ./src/index.js 84 bytes {0} [built]
[1] multi ./src/index.js ./src/index.js ./dist/bundle.js 52 bytes {0} [built]
[2] ./src/index.css 1.08 kB {0} [built]
[3] ./node_modules/_css-loader@0.28.4@css-loader!./src/index.css 237 bytes {0} [built]
[7] ./dist/bundle.js 18.4 kB {0} [built]
+ 3 hidden modules
运行index.html,可以看到页面中的Hello Webpack。
使用配置文件
创建webpack.config.js文件
module.exports = {
entry : "./src/index.js",
output : {
filename : "bundle.js",
path : __dirname+"/dist"
}
};
在终端输入webpack –config webpack.config.js 或者直接输入webpack,并回车
webpack --config webpack.config.js
Hash: e2e4b7042538facd73f0
Version: webpack 3.4.1
Time: 216ms
Asset Size Chunks Chunk Names
bundle.js 18.4 kB 0 [emitted] main
[0] ./src/index.js 84 bytes {0} [built]
[1] ./src/index.css 1.08 kB {0} [built]
[2] ./node_modules/_css-loader@0.28.4@css-loader!./src/index.css 237 bytes {0} [built]
+ 3 hidden modules
使用npm
修改package.json文件中
{
...
"scripts": {
"build": "webpack"
},
...
}
在终端运行npm run build
使用source map
跟踪代码错误
修改webpack.config.js
//...省略
module.exports = {
devtool : "inline-source-map",
//...省略
}
修改index.js文件,故意生成一个错误
import "./index.css";
import wicon from "./webpack.png";
function fun(){
console.log(a);
//...省略
}
重新构建,刷新页面,在控制台可以看到如下错误
Uncaught ReferenceError: a is not defined
at fun (index.js:4)
at Object.<anonymous> (index.js:10)
at __webpack_require__ (bootstrap 403852e…:19)
at module.exports (bootstrap 403852e…:62)
at bootstrap 403852e…:62
可以看到,错误信息及错误所在文件和行数
开发模式
- 观察模式
在终端输入 webpack -w 或 webpack –watch
会发现执行构建后,并没有退出命令,此时正处理观察模式
可以在package.json的scripts配置项中增加如下内容
"scripts": {
"watch" : "webpack --watch"
},
终端运行npm run watch 也能得到相同的效果
webpack-dev-server 即时刷新
安装
npm install –save-dev webpack-dev-server
修改webpack.config.js
devServer : {
contentBase : "./dist"
}
在终端输入 webpack-dev-server 或 在package.json的scripts配置项中增加如下内容并使用npm run dev:
"scripts": {
"watch": "webpack --watch",
"dev": "webpack-dev-server --open"
},
会发现会自动打开浏览器,当有任意一个源文件被修改时,会自动重新刷新页面
热加载模式
修改webpack.config.js
const webpack = require("webpack");
//...省略
plugins : [
new webpack.HotModuleReplacementPlugin()
],
//...省略
修改package.json的scripts配置项
"scripts": {
"watch": "webpack --watch",
"dev": "webpack-dev-server --open --hot"
}
即可开启hmr模式。即允许在运行时更新各模块,而无需进行完全刷新
loader
CSS
style-loader css-loader
css-loader用于将css文件做为模块处理,可以使用import 导入
style-loader 将所有处理完成的样式插入到页面的head中
安装
npm install --save-dev style-loader css-loader
修改webpack.config.js
const path = require("path");
module.exports = {
entry : "./src/index.js",
output : {
filename : "bundle.js",
path : path.resolve(__dirname,"dist")
},
module : {
rules : [{
test : /\.css$/,
use : ["style-loader","css-loader"]
}]
}
};
在src目录下建立index.css文件
body{
font-size : 50px;
color : red;
}
修改index.js文件
import "./index.css";
//...省略
在终端执行npm run build,刷新页面
less | sass
less-loader sass-loader
安装
npm install --save-dev less less-loader
图片
file-loader
安装
npm install --save-dev file-loader
修改webpack.config.js文件
//...省略
module : {
rules : [{
test : /\.css$/,
use : ["style-loader","css-loader"]
},{
test : /\.(png|jpg|gif|jpeg)$/,
use : ["file-loader"]
}]
}
//...省略
修改index.css文件
.box{
width: 497px;
height:270px;
background: url(./webpack.png)
}
修改index.html文件
<body>
<div class="box"></div>
</body>
找一张你喜爱的照片拷贝至src目录下,终端运行npm run build, 刷新页面
继续
修改index.js文件
import "./index.css";
import wicon from "./webpack.png";
function fun(){
document.write("Hello Webpack");
let img = new Image();
img.src = wicon;
document.body.appendChild(img);
}
fun();
重新执行构建,刷新页面,你可以看到两张图片
JSON数据
JSON数据的加载是内置的,可以通过 import mdata from ‘./data.json’, 即可正常使用
ES6 | JSX
babel-loader
安装 由于babel是几个模块包,对于解析不同的语言需要安装不同的包
常用的有如下:
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
- babel-core babel的核心包
- babel-loader bable的Loader
- babel-preset-es2015 转换ES代码
- babel-preset-react 转换JSX代码
在src目录新增other.js
export default function say(){
console.log("hello!!!");
}
修改index.js
import say from "./other.js";
function fun(){
say();
//...省略
}
修改webpack.config.js
modules : {
//...省略
rules : [
//...省略
{
test : /\.js$/,
use : [{
loader : "babel-loader",
options : {
presets : ["es2015"]
}
}]
}]
}
//...省略
重新构建,观察控制台
多文件入口
在src目录增加home.js
function fun(){
console.log("home is output");
}
fun();
修改index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="box"></div>
</body>
<script src='./app.bundle.js' charset='utf-8'></script>
<script src='./home.bundle.js' charset='utf-8'></script>
</html>
修改webpack.config.js
//...省略
entry: {
app : "./src/index.js",
home : "./src/home.js"
},
output: {
filename: "[name].bundle.js",
path: __dirname + "/dist"
},
//...省略
重新执行构建,并刷新页面,观察控制台
问题:如果修改webpack.config.js中第7行filename一行所输出的文件名称,重新构建,会发现在dist目录会新增新名称的文件,但index.html文件中依然引用的是旧的名字,如何解决?(参见 插件 htmlwebpackplugin)
插件
HtmlWebpackPlugin
自动生成页面
安装
npm install --save-dev html-webpack-plugin
修改webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
//...省略
},
output: {
//...省略
},
plugins : [
new HtmlWebpackPlugin()
],
module: {
//...省略
}
};
重新执行构建,并刷新页面。
观察dist目录下的index.html,发现在测试file-loader时,创建div不见了,上述插件为我们创建一个新的html文件,并自动将output项所指定的filename引入到了页面中
clean-webpack-plugin
清理dist目录
安装
npm install --save-dev clean-webpack-plugin --save-dev
修改webpack.config.js
const CleanWebpackPlugin = require("clean-webpack-plugin");
//...省略
plugins : [
new HtmlWebpackPlugin(),
new CleanWebpackPlugin(["dist"])
],
//...省略
重新执行构建,dist目录清静了