目录
1 webpack 基本使用
01 webpack 简介
02 webpack 初体验
2 webpack开发环境配置
03 打包样式资源
04 打包html资源
05 打包图片资源
06 打包其他资源(以打包icon为例)
07 devServer
08.开发环境配置
1 webpack 基本使用
由于笔记文档没有按照之前的md格式书写,所以排版上代码上存在问题😢😢😢😢
01 webpack 简介
初始化文件---包的名字---默认值ok---下载jQuery
![](https://i-blog.csdnimg.cn/blog_migrate/7221f3578d2f98ef33945bbc8b2cab2b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3051b7c749678810b1c476bbedf3b620.png)
02 webpack 初体验
1.webpacvk安装
npm install --save-dev webpack@4.46.0
npm install --save-dev webpack-cli@3
![](https://i-blog.csdnimg.cn/blog_migrate/31bc68867b3096c9785f0e76728f59c0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/db90a4733c46ba1b305be89c3e235fe3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2b299ca8bf47eec7fe1103deb3b79e8f.png)
2.运行指令
![](https://i-blog.csdnimg.cn/blog_migrate/ce60ed1ea2bed637762e3ef842cafcbb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1fe6e1e4e943b5b513bdd140d27930c0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/04e151b0516817776d82015fda97cadf.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f04e6823abfe4b7f549e5dbc1f2164b6.png)
3.css不能处理
![](https://i-blog.csdnimg.cn/blog_migrate/e2b731c361e2e3f098885896fbc4e44c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/72b34797251dca9c57ed96eabb6577dd.png)
2 webpack开发环境配置
03 打包样式资源
1 打包css
loader:解析翻译webpack不能识别的模块,loader需要定义配置文件 |
项目(src)使用的是:ES6
配置 (webpack.config.js) 使用的是:common.js
![](https://i-blog.csdnimg.cn/blog_migrate/d06db9e48c8e1742cf14ab0d5ebdbcf1.png)
- 配置css-loader style-loader
npm i css-loader@3.4.2 style-loader@1.1.3 -D
(如果,安装错误,可能是因为版本过高的问题)
- webpack.config.js
JavaScript /* webpack.config.js webpack的配置文件 作用: 指示 webpack 干哪些活(当你运行 webpack 指令时,会加载里面的配置)
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。 */
// resolve用来拼接绝对路径的方法 const { resolve } = require('path');
module.exports = { // webpack配置 // 入口起点 entry: './src/index.js', // 输出 output: { // 输出文件名 filename: 'built.js', // 输出路径 // __dirname nodejs的变量,代表当前文件的目录绝对路径 path: resolve(__dirname, 'build') }, // loader的配置 module: { rules: [ // 详细loader配置 // 不同文件必须配置不同loader处理 { // 匹配哪些文件 test: /\.css$/, // 使用哪些loader进行处理 use: [ // use数组中loader执行顺序:从右到左,从下到上 依次执行 // 创建style标签,将js中的样式资源插入进行,添加到head中生效 'style-loader', // 将css文件变成commonjs模块加载js中,里面内容是样式字符串 'css-loader' ] }, ] }, // plugins的配置 plugins: [ // 详细plugins的配置 ], // 模式 mode: 'development', // 开发模式 // mode: 'production' } |
- 打包
![](https://i-blog.csdnimg.cn/blog_migrate/e451a6a94e02e8169cf8e1c0c46e3b5e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e7689cc6f3983d9f407aee03d9a6eb97.png)
此时的css也打包进去了
![](https://i-blog.csdnimg.cn/blog_migrate/f0b76c364e69af958561fa5913b74220.png)
小结一下: 打包过程:首先是入口文件index.js,之后又相关联打包文件eg index.css,可以打包的直接打包,不可以的,需要配置webpack.config.js然后再打包,打包之后的文件到build/built.js,可以在里面代码中找到相关的打包的文件 |
- 是否生效
在build里面新建一个index.html
![](https://i-blog.csdnimg.cn/blog_migrate/dd66fa3191b555a08c78d340879c0d62.png)
2 打包less
如果直接打包less,会出现报错,我们需要配置less-loader
![](https://i-blog.csdnimg.cn/blog_migrate/255c33e37e5f2c3e0cb4ec7140c8a742.png)
- 配置less-loader
![](https://i-blog.csdnimg.cn/blog_migrate/6978fd4f739d2268e8d1eb90dc6ef00e.png)
- webpack.config.js
上述代码里面添加
JavaScript { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] } |
- 打包
![](https://i-blog.csdnimg.cn/blog_migrate/ee9cda9871c374af5aa45d40a91e5773.png)
小结一下: webpack只能打包js,json,其他的css,less等需要下载loader资源 不同文件配置不同loader处理 |
04 打包html资源
webpack.config.js基本结构
![](https://i-blog.csdnimg.cn/blog_migrate/3781240e81dacd42c168aa15bde5cd66.png)
- 下载插件
npm i html-webpack-plugin@3 -D
![](https://i-blog.csdnimg.cn/blog_migrate/032e2ec2d05f091a84e0a4f7d2db393a.png)
- 引用,使用
![](https://i-blog.csdnimg.cn/blog_migrate/4d0303dbc4e1a58b823d5fc16c2d6b5c.png)
- 打包
![](https://i-blog.csdnimg.cn/blog_migrate/9f2453ea177b2876f7da6b47e58917ed.png)
- plugins配置
![](https://i-blog.csdnimg.cn/blog_migrate/711f90e6e0e3b48960683301d3f9effd.png)
05 打包图片资源
- 入口文件引入样式
import './index.less'
- less里面又引入了图片资源,所以我们需要配置,来打包这个资源
- 对样式文件和html文件进行处理
JavaScript const { resolve } = require('path'); const HtmlWebpackPlungin = require('html-webpack-plugin')
module.exports = { entry: './src/index.js', output: { filename: 'built.js', path: resolve(__dirname, 'build') },
module: { rules: [ { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ], }, plugins: [ new HtmlWebpackPlungin({ template: './src/index.html' }) ], mode: 'development' } |
- 打包
![](https://i-blog.csdnimg.cn/blog_migrate/f637b374e62dccc71a0270e87dede122.png)
会出现错误------图片资源
- url 图片处理
![](https://i-blog.csdnimg.cn/blog_migrate/88dfb086b421caa374cd70a2ff515afa.png)
- 2 下载url-loader , file-loader
npm i url-loader@3.0.0 file-loader@5.0.2 -D
![](https://i-blog.csdnimg.cn/blog_migrate/07cfcca56cddfb51781445227aeff9f9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/39b77230642cbfdda3d20d434c58ebfc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fc3b33354427d82268a176a597b6c3ff.png)
样式里面的url的图片资源都可以处理,但是默认处理不了html里面的图片,需要下载html-loader |
- html图片处理
- webpack.config.js配置
![](https://i-blog.csdnimg.cn/blog_migrate/e980daebdf4e14efa4678f76e109f6be.png)
- 下载 npm i html-loader@0.5.5 -D
- 打包 npx webpack
![](https://i-blog.csdnimg.cn/blog_migrate/dda239fb60449bd51f73434e9a0aae10.png)
打包成功了,但是还是会有问题,页面中图片还是会裂开
![](https://i-blog.csdnimg.cn/blog_migrate/11a58da143a894f8b48be2a6822de37d.png)
问题: 因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs 解析时会出问题: [ object Module ] 解决: 关闭url-loader的es6模块化,使用commonjs解析 esModule: false |
![](https://i-blog.csdnimg.cn/blog_migrate/3323aea651fbe21f231aa967dc39ae02.png)
- 图片名过长,更改图片名
![](https://i-blog.csdnimg.cn/blog_migrate/77c2b555c971ec02e44128dd627c6922.png)
![](https://i-blog.csdnimg.cn/blog_migrate/224cf58be6dce18a19d21b3b1582998e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/15e9ab30737f64d1ea3868d57f3114d3.png)
06 打包其他资源(以打包icon为例)
步骤:
- 阿里图标下载所需要资源代码
- index.html引入图标 <span class="iconfont icon-zhaopinqiuzhi"></span>
- 入口文件index.js 引入iconfont样式文件 import './iconfont.css'
- 写webpack配置
JavaScript // 打包其他资源(除了html/js/css资源以外的资源) { // 排除css/js/html资源 exclude: /\.(css|js|html)$/, loader: 'file-loader' } |
- 打包npx webpack
![](https://i-blog.csdnimg.cn/blog_migrate/3af5aef43369d0a527515866725f4104.png)
- 运行build里面的index.html
![](https://i-blog.csdnimg.cn/blog_migrate/1f1f6972b0d13ce56cf723c104054e41.png)
07 devServer
![](https://i-blog.csdnimg.cn/blog_migrate/83e032275e88c589706ddc122e3ef223.png)
- webpack配置
![](https://i-blog.csdnimg.cn/blog_migrate/f017ea3fd0cbf659bc578f0e2702bd30.png)
- 下载 npm i webpack-dev-server@3.10.3 -D
- 启动 npx webpack-dev-server
![](https://i-blog.csdnimg.cn/blog_migrate/875b59c22713b9a16e33c4110a32c3ce.png)
- localhost:3000就可以访问尴尬index.html页面内容
![](https://i-blog.csdnimg.cn/blog_migrate/2dbee1645fd5ecd8385ff9aad924a1ac.png)
- 更改代码内容时,终端也会随之改变,localhost里面的内容也会改变,都是自动编译的,就不用像之前,修改完代码,就打包一次(监视源代码)
![](https://i-blog.csdnimg.cn/blog_migrate/47a45e6a61ded8ff1bb3616d19df848e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cef0fc1d377f6b92bc227f21491f1769.png)
目录
1 webpack 基本使用
01 webpack 简介
02 webpack 初体验
2 webpack开发环境配置
03 打包样式资源
04 打包html资源
05 打包图片资源
06 打包其他资源(以打包icon为例)
07 devServer
08.开发环境配置
08.开发环境配置
JavaScript /* 开发环境配置:能让代码运行 运行项目指令: webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包,没有输出 */
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [ // loader的配置 { // 处理less资源 test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { // 处理css资源 test: /\.css$/, use: ['style-loader', 'css-loader'] }, { // 处理图片资源 test: /\.(jpg|png|gif)$/, loader: 'url-loader', options: { limit: 8 * 1024, name: '[hash:10].[ext]', // 关闭es6模块化 esModule: false, outputPath: 'imgs' } }, { // 处理html中img资源 test: /\.html$/, loader: 'html-loader' }, { // 处理其他资源 exclude: /\.(html|js|css|less|jpg|png|gif)/, loader: 'file-loader', options: { name: '[hash:10].[ext]', outputPath: 'media' } } ] }, plugins: [ // plugins的配置 new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development', devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000, open: true } }; |
补充:
源代码通过webpack编译处理,输出bundle,资源文件就能被浏览器运行
我们就需要搭建这样的环境,我们还加了一些自动化操作,自动打开浏览器,等等
![](https://i-blog.csdnimg.cn/blog_migrate/b6122e1ac1bd4fe99f4ff6cebaeb5f55.png)