以前也了解过 webpack, 而且多数情况都是和 vue,react 这些技术联系在一起. 这次正式的学习 webpack 起源于最近开发的微信项目.
相信大家都遇到过微信缓存的问题, 上线的项目遇到版本更新的时候总会有一部分用户因为缓存的问题出现各种各样的问题. 让客户自己手动去清理微信缓存肯定会大大降低用户体验, 于是就在网上查了下关于微信缓存的解决方案.
整理下来大概有三种:
html 代码
1, 添加版本号.
2, 引用文件的时候, 在后面添加随机数.
3, 使用打包工具.
前两种方法简单粗暴, 我就不细说了. 但是前两种方式有个问题就是, 每次更改过文件后, 你都需要去手动修改相应的版本号和随机数. 项目大一点以后非常不利于管理, 于是就将目光锁定在第三种方法上. 然后就搜到了 webpack 打包工具, 最近也蛮火的, 据说比 gulp 简单, 上手快. 最后就选了 webpack.
一, 使用前的准备
首先我们需要先安装 webpack.
1, 新建一个文件夹, 作为你的项目文件夹, 这里我取名为 [webpackPro] .
2, 在该文件夹按住 shift 键点击鼠标右键, 点击 [在此处打开命令窗口] , 这样我们就调出命令窗口了, 并默认是当前文件夹的目录.
3, 在命令行里键入命令:
html 代码
- npm install -g webpack // 全局安装
- npm install --save-dev webpack // 安装到你的项目目录
说明: 你可以选择全局安装, 或者是安装到你的项目中, 都可以.
如果提示你说 "npm 不是内部命令", 那么说明你还没有 nodejs 的环境, 可以去官网下载 nodejs 并安装和配置好环境变量. 但是由于 npm 安装插件是从国外服务器下载, 受网络影响大, 可能出现异常. 所以我还是喜欢用淘宝镜像的, 除了用 cnpm 替换 npm , 其他都是一模一样的. 所以以下我都用 cnpm 的版本.
结果: 安装成功以后, 你的文件夹里就会多一个 [node_modules] 的文件夹. 并且我的文件夹里出现了一个名为 package 的 json 文件.
补充: 如果你的没有 package.json 文件, 可以在命令行里键入命令 [cnpm init] , 然后就会有一些提示, 比如项目名称, 项目描述, 作者等, 如果不想管, 可以一直回车, 这样初始化 webpack 就完成了.
目前的目录结构:
- -webpackPro
- -node_modules
- ...
- -package.json
二, 准备我们需要打包的源文件
在 webpackPro 文件下新建一个名为 [src] 的文件夹, 这个文件夹用来存放我们的源码.
然后常规操作,[src] 下新建 [CSS] ,[images] ,[js] 文件夹分别存放我们的样式表, 图片和脚本文件.
然后在 [src] 下新建一个 index.html.
最后在 index.html,css 文件夹, images 文件夹, js 文件夹里写上和放入相关的代码和文件即可.
目前的目录结构:
- -webpackPro
- -node_modules
- ...
- -src
- -css
- -index.css
- -images
- ...
- -js
- -index.js
- index.html
- -package.json
三, 然后我们就可以开始打包啦
打包的方式可以在命令行直接打包制定文件, 也可以配置配置文件来进行打包.
1, 直接打包
在 webpackPro> src> js 文件夹里调出命令行, 键入命令:
html 代码
cnpm index.js output.js
说明: index.js 是你需要打包的文件, output.js 是打包后的输出文件.
结果: 打包成功后, 你的 [js] 文件夹内就出现了一个 output.js 文件, 这就是打包后的 index.js 文件. output.js 里面有很多代码, 你的 index.js 里面的代码可以在 output.js 文件的文末看到.
补充: 但是是无法直接打包 css 和图片. css 和图片的处理方式后面会讲到.
目前的目录结构:
- -webpackPro
- -node_modules
- ...
- -src
- -css
- -index.css
- -images
- ...
- -js
- -index.js
- -output.js // 打包后的文件
- index.html
- -package.json
2, 利用配置文件
在 webpackPro 下新建一个名为 [dist] 的文件夹作为输出文件夹, 打包后的文件都放在这里.
然后在 webpackPro 下新建一个名为 [webpack.config] 的配置文件 js, 内容如下:
**javascript 代码 **
- const path = require('path');
- const config = {
- entry:'./src/js/index.js', // 入口文件
- output:{
- filename: 'output.js', // 输出文件名
- path: path.join(__dirname,'./dist/') // 输出路径
- }
- };
- module.exports = config;
然后在 webpackPro 下输入命令: webpack, 就会自动去寻找根目录下的 webpack.config.js 配置文件, 并根据配置文件的内容打包.
说明:(1),entry 是 webpack 的入口, 里面配置 webpack 的入口文件. 接受字符串或者是对象,
如果只有一个入口文件, 字符串就可以; 如果有多个入口文件需要写成对象的形式. 比如:
**javascript 代码 **
- entry:{
- index:'./src/js/index.js',
- login:'./src/js/login.js'
- }
(2),output 是 webpack 的输出, 决定最后文件打包成什么样子.
filename 是输出的文件名, path 是输出文件的位置. 如果是多个文件入口,
为了避免所有 js 都被打包成一个 js(因为同名文件会被覆盖), 需要对文件名进行处理. 比如:
**javascript 代码 **
filename: '[name].[hash:8].js',
'[name]'是之前的文件名, 这样每个打包后的文件名都不一样;
'[hash:8]'是 hash 值, 一个随机的字符串, 正是有了这个才保住每个文件的唯一性, 也是解决微信缓存的关键. 冒号后面一个 8, 表示显示 8 位 hash 值.
结果: 打包成功以后, dist 文件夹下就会出现一个名为 [output] 的 js 文件, 该文件就是我们打包后的输出文件.
目前的目录结构:
- -webpackPro
- -dist
- -output.js
- -node_modules
- ...
- -src
- -css
- -index.css
- -images
- ...
- -js
- -index.js
- index.html
- -package.json
- -webpack.config.js
四, 如何在 index.html 中引入 index.js,index.css 并打包
1, 因为 webpack 不能单独处理 css 文件, 所以我们先在 index.js 里引入 index.css 文件:
javascript 代码
import "../css/index.css";
2, 使用工具前, 我们得先安装. 所以我们在命令行里输入:
**html 代码 **
- cnpm install css-loader style-loader --save-dev // 安装 css-loader, style-loader
- cnpm install html-webpack-plugin --save-dev // 安装 html-webpack-plugin
3, 然后我们在配置文件中配置, 处理非 js 文件的文件, 我们需要配置加载器和插件. 加载器和插件是 webpack 里非常重要的功能, 加载器使得我们可以调用外部的脚本或工具, 实现对不同格式的文件的处理, 如: scss,es6 等. 插件是用来拓展 Webpack 功能的, 它们会在整个构建过程中生效, 执行相关的任务. 所以我们在配置文件中加入加载器如下:
**javascript 代码 **
- const path = require('path');
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- const config = {
- entry:{
- index:'./src/js/index.js'
- }, // 入口文件
- output:{
- filename: 'output.js', // 输出文件名
- path: path.join(__dirname,'./dist/') // 输出路径
- },
- module:{
- rules: [
- {
- test:/\.css$/,
- loader:['style-loader','css-loader']
- }
- ]
- }, // 加载器
- plugins: [
- new HtmlWebpackPlugin(
- {
- filename: 'index.html',
- template: './src/index.html',
- chunks: ['index']
- }
- )
- ]
- };
- module.exports = config;
说明: module 里面配置加载器: test 是一个用以匹配 loaders 所处理文件的拓展名的正则表达式, 是一个必填的值; loader 是 loader 的名称, 也是必填.
plugins 里面配置插件: filename 是输出文件名. template 是 html 模板路径. chunks 和 entry 里面的入口名相对应, html 里面需要引入哪些 js 这里就填哪些.
结果: 打包好以后 dist 里面就会生成两个文件: 一个 index.html, 一个 output.js 文件. 访问 index.html, 发现样式和脚本都被打包进去了, 也就说明我们打包成功了.
补充: 加载器和插件都可以有很多个, 以满足不同文件的打包处理需求. 注意打包之前需要安装相应的依赖.
目前的目录结构:
- -webpackPro
- -dist
- -index.html
- -output.js
- -node_modules
- ...
- -src
- -css
- -index.css
- -images
- ...
- -js
- -index.js
- index.html
- -package.json
- -webpack.config.js
五, webpack 对于图片的打包问题
1, 命令行安装加载器:
html 代码
cnpm install url-loader --save-dev
2, 修改配置文件, 增加对于图片处理的加载器
javascript 代码
- module:{
- rules: [
- {
- test: /\.(gif|jpg|woff|svg|eot|ttf)\??.*$/,
- loader: 'url-loader?limit=8192&name=images/[name].[hash:8].[ext]'
- },
- {
- test: /\.png$/,
- loader: "file-loader?name=images/[name].[hash:8].[ext]"
- }
- ]
- }
说明: limit 是图片的界限值, 小于这个界限值的图片 webpack 就会打包成 base64 格式, 大于这个值就会在输出文件夹里生产一个 images 文件夹, 并将图片放在里面.
补充: 处理图片就是要注意路径问题. 图片的丢失, webpack 也会编译出来并报错.
到这里, 一个超级简单的项目打包我们就完成了.
具体的参数, 详细使用说明可以参照 webpack 中文版文档:
https://doc.webpack-china.org/concepts/#-entry -
补充一个关于 img 标签里面的图片打包后 404 的解决方案: 使用 html-withimg-loader 就可以解决这个问题
1, 命令行安装加载器:
html 代码
cnpm install html-withimg-loader --save-dev
2, 修改配置文件: 在处理 html 时使用这个加载器
javascript 代码
- new HtmlWebpackPlugin(
- {
- filename: 'index.html',
- template: 'html-withimg-loader!' + path.resolve('./src/', 'index.html'),
- chunks: ['index']
- }
- )
来源: http://www.qdfuns.com/article/44817/d2ef07448b213bf443d2703e964c4b26.html