前言
这篇文章是本人学习 webpack3 的笔记总结,现在 webpack 版本已经更新到了4。其中2和3是可以通用的,但是1和其他的两个版本依赖上有些不相容,所以不能一起使用。Webpack1到2最大的升级是tree-shaking,其次是配置文件的对象化,再其次包括插件的写法优化。Webpack2到3的最大升级是scope-hoisting。3到4简化了整个打包配置操作。
什么是webpack
webpack 是一个模块打包器,它将根据模块的依赖关系进行静态分析,生成对应的静态资源
理解Loader
webpack 本身只能加载 JS/JSNO 模块,如果加载其他类型的文件(模块),就需要使用对应的 loader 进行转换/加载,它本身是一个函数,接受源文件作为参数,返回转换的结果。loader 一般以
xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转化功能,比如 css-loader
配置文件(默认)
webpack.config.js :是一个node模块,返回一个 json 格式的配置信息对象
插件
插件可以完成一些 loader 不能完成的功能,插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。常用的插件如下:(需要了解更多插件可以查看webpack2中文文档)
CleanWebpackPlugin: 自动清除指定文件夹资源
HtmlWebpackPlugin: 自动生成HTML文件并
UglifyJSPlugin: 压缩js文件
初始化项目
npm init :生成 package.json 文件,也可以手动创建
{
"name": "webpack01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
}
安装 webpack
npm install webpack -g :全局安装
npm install --save-dev webpack :局部安装
pm install webpack@3.8.1 --save-dev :安装指定的版本
如果你使用 webpack v4+ 版本,你还需要安装 CLI。
npm install --save-dev webpack-cli 或 npm install --save-dev webpack-command
安装完成后可通过 webpack 命令检验是否成功,webpack -h 可以查看 webpack 的版本。
实现打包功能
创建一个空的项目,创建入口src/js/ : entry.js:用于引入所需要打包的各种文件
import {foo,bar} from "./main";
import data from "../data/test.json";
import '../css/test.css';
*document.write(“entry.js is work”); //内容可随意编写,只是为了初步检验
编译js
webpack src/js/entry.js dist/js/bundle.js ,其中 src/js/entry.js 是需要打包的文件路径,dist/js/bundle.js 是打包后生成文件的路径,每更新一次数据都需要重新执行打包命令。
使用 webpack 配置文件
webpack.config.js:该配置模式固定,可以直接复制,更改自己对应的文件路径即可。
const path = require('path');
module.exports = {
entry: './src/index.js', //入口文件,即需要打包的文件集合
output: {
filename: 'main.js', //打包后的输出文件名
path: path.resolve(__dirname, 'dist') //输出文件路径
}
};
使用该配置文件后可以通过 webpack 命令即可执行打包文件,则简化了上面 webpack src/js/entry.js dist/js/bundle.js 这一大串的命令。
打包css和图片文件
安装样式的 loader
npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev
补充:url-loader是对象file-loader的上层封装,使用时需配合file-loader使用。
配置 loader
webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
在 src目录下创建一个 image 文件夹,并放入两张图片
* 小图: img/logo.png
* 大图: img/big.jpg
创建样式文件: src/css/test.css
body {
background: url('../img/logo.jpg')
}
更新入口 js : entry.js
import ‘…/css/test.css’
添加css样式
#box1{
width: 300px;
height: 300px;
background-image: url("../image/logo.jpg");
}
#box2{
width: 300px;
height: 300px;
background-image: url("../image/big.jpg");
}
index.html 添加元素
<div id="box1"></div>
<div id="box2"></div>
执行打包命令 webpack
注意:此时会出现问题,大图无法打包到entry.js文件中,index.html不在生成资源目录下。页面加载图片会在所在目录位置查找,导致页面加载图片时候大图路径无法找到。
解决办法:
使用publicPath : ‘dist/js/’ //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。将index.html放在dist/js/也可以解决。
自动编译打包
利用webpack开发服务器工具: webpack-dev-server
下载
npm install --save-dev webpack-dev-server
执行:webpack-dev-server
**注意:**我在这个地方之前遇到了一个问题,也是花了不少时间才解决的,当执行 webpack-dev-server 时,提示错误,说webpack-dev-server 不是内部命令
解决办法:
1、删除
node_modules
2、更改镜像
npm config set registry https://registry.npm.taobao.org
3、安装
nmp install
4、指定版本安装 webpack-dev-server
npm install -g webpack-dev-server@2.7.1
5、启动
webpack-dev-server
webpack配置
devServer: {
contentBase: './dist'
},
package 配置
"start": "webpack-dev-server --open"
最后编译打包应用并运行
npm start