前端自动化打包工具
1、安装
mkdir webpack-test
cd webpack-test
npm init
cnpm install --save-dev webpack
cnpm install -g webpack
webpack
webpack -w(webpack --watch)
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文件
在终端（工作目录为当前项目目录），输入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/[email protected]@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/[email protected]@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. (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文件
找一张你喜爱的照片拷贝至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文件
修改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目录清静了