webpack打包路径更改_webpack打包教程
创建package.json文件
命令:npm init
安装webpack
npm install --save-dev webpack
npm install --save-dev webpack-cli
全局安装:
npm install --global webpack webpack-cli
打包
默认entry入口 src/index.js
默认output出口 dist/main.js
打包模式:
webpack --mode development
webpack --mode production
二、配置webpack.config.js
新建一个webpack.config.js
配置入口entry(所需打包的文件路径)
配置出口output
(1)path指文件打包后的存放路径
(2)path.resolve()方法将路径或路径片段的序列处理成绝对路径
(3)__dirname 表示当前文件所在的目录的绝对路径
(4)filename是打包后文件的名称
三、入口entry和出口output进阶用法
入口entry
(1)单入口
单文件:
例如: entry:‘./src/index.js’
多文件:
在你想要多个依赖文件一起注入,并且将它们的依赖导向到一个“chunk”时,传入数组的方式就很有用。
例如:entry:[‘./src/index.js’,‘./src/index2.js’,.......]
(2)多入口
例如:
entry:{
pageOne: ‘./src/pageOne/index.js‘,
pageTwo: ‘./src/pageTwo/index.js‘,
pageThree: ‘./src/pageThree/index.js‘
}
出口output
(1)单出口
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘bundle.js‘
}
(2)多出口
output:{
path:path.resolve(__dirname,‘dist‘),
filename:‘[name].js‘
}
四、配置webpack-dev-server
了解webpack-dev-server
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能:
(1)为静态文件提供服务
(2)自动刷新和热替换(HMR)
安装webpack-dev-server
npm install --save-dev webpack-dev-server
配置webpack.config.js文件
devServer:{
contentBase:‘./build, //设置服务器访问的基本目录
host:‘localhost‘, //服务器的ip地址
port:8080, //端口
open:true //自动打开页面
}
配置package.json
"scripts": {
"start": "webpack-dev-server --mode development"
}
五、1. 了解loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
安装loader
安装style-loader和css-loader
下载:
npm install style-loader css-loader --save-dev
配置loader
(1)在webpack.config.js文件里配置module中的rules
在 webpack 的配置中 loader 有两个目标:
test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性,表示进行转换时,应该使用哪个 loader。
代码:
九、使用PostCSS处理浏览器前缀
(1)处理效果
(2)安装loader
安装postcss-loader和autoprefixer
下载:
npm install --save-dev postcss-loader autoprefixer
(3)配置loader
需要和autoprefixer一起用
浏览器设置:
Loader中设置:
{
browsers: [
‘ie >= 8‘,//ie版本大于等于ie8
‘Firefox >= 20‘,//火狐浏览器大于20版本
‘Safari >= 5‘,//safari大于5版本
‘Android >= 4‘,//版本大于Android4
‘Ios >= 6‘,//版本大于ios6
‘last 4 version‘//浏览器最新的四个版本
]
}
或者在package.json里加上下图设置:
十、文件处理
图片处理
(1)安装loader
下载安装file-loader
npm install --save-dev file-loader
(2)配置config文件
(3)选项配置
配置options:
name:为你的文件配置自定义文件名模板(默认值[hash].[ext])
context:配置自定义文件的上下文,默认为 webpack.config.js
publicPath:为你的文件配置自定义 public 发布目录
outputPath:为你的文件配置自定义 output 输出目录
[ext]:资源扩展名
[name]:资源的基本名称
[path]:资源相对于 context的路径
[hash]:内容的哈希值
字体文件处理
(1)下载字体文件
以bootstrap字体文件为例子
Boostrap字体文件下载地址:https://v3.bootcss.com/getting-started/
(2)配置config文件
第三方 js库处理
以jquery库为例子
(1)本地导入
编写配置文件:
webpack.ProvidePlugin参数是键值对形式,键就是我们项目中使用的变量名,值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。
如果webpack配置了resolve.alias选项(理解成“别名”),那么webpack.ProvidePlugin就会顺着设置的路径一直找下去
使用webpack.ProvidePlugin前需要引入webpack
(2)npm安装模块
安装jquery库:
npm install jquery --save-dev
直接在js里import引入
Import $ from‘jquery’
十一、编译es6
了解babel
目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁、功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善。为了实现兼容,就需要使用转换工具对ES6语法转换为ES5语法,babel就是最常用的一个工具
babel转化语法所需依赖项:
babel-loader: 负责 es6 语法转化
babel-core: babel核心包
babel-preset-env:告诉babel使用哪种转码规则进行文件处理
安装依赖
npm install babel-loader @babel/core @babel/preset-env --save-dev
配置config文件
exclude表示不在指定目录查找相关文件
新建 .babelrc 文件配置转换规则
另一种规则配置
.
十二、生成HTML(html-webpack-plugin)
了解html-webpack-plugin
HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件。
根据src下的index.html自动在打包后的目录下生成html文件,相关引用关系和文件路径都会按照正确的配置被添加进生成的html里
安装依赖
npm install html-webpack-plugin --save-dev
配置config文件
十三、提取分离css
处理效果
将所有的入口 chunk(entry chunks)中引用的 css,移动到独立分离的 CSS 文件
ExtractTextPlugin插件
(1)安装(下载)
npm install --save-dev extract-text-webpack-plugin@next
(2)配置config文件
引入插件:
Rules设置:
fallback:编译后用什么loader来提取css文件
Plugins设置
mini-css-extract-plugin插件
(1)安装(下载)
npm install --save-dev mini-css-extract-plugin
(2)配置config文件
引入插件
Rules设置:
Plugins设置
十四、压缩css及优化css结构
处理效果
optimize-css-assets-webpack-plugin插件
(1)安装(下载)
npm install --save-dev optimize-css-assets-webpack-plugin
(2)配置config文件
引入插件:
Plugins设置
assetNameRegExp: 正则表达式,用于匹配需要优化或者压缩的资源名。默认值是 /.css$/g
cssProcessor: 用于压缩和优化CSS 的处理器,默认是 cssnano.
cssProcessorPluginOptions:传递给cssProcessor的插件选项,默认为{}
canPrint:表示插件能够在console中打印信息,默认值是true
discardComments:去除注释
十拷贝静态文件
处理效果
安装(下载)
npm install --save-dev copy-webpack-plugin
配置config文件
引入插件:
Plugins设置
十五、用clean-webpack-plugin来清除文件
处理效果
当我们修改带hash的文件并进行打包时,每打包一次就会生成一个新的文件,而旧的文件并没有删除。
为了解决这种情况,我们可以使用clean-webpack-plugin在打包之前将文件先清除,之后再打包出最新的文件
安装
npm install --save-dev clean-webpack-plugin
配置config文件
引入插件
Plugin配置
十六、HTML中引入图片
处理效果
未使用loader时,会出现路径错误,图片不显示的情况
经过loader处理后,图片能正常显示
安装
cnpm install --save-dev html-loader
配置config文件
Rules中配置
十六、使用sourcemap调试
了解sourcemap
Sourcemap是为了解决实际运行代码(打包后的)出现问题时无法定位到开发环境中的源代码的问题。
devtool选项
5个基本类型:
(1) eval
每个模块都使用 eval() 执行,每一个模块后会增加sourceURL来关联模块处理前后的对应关系。如下图
由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。因为不需要生成模块的sourcemap,因此打包的速度很快。
webpack打包路径更改_webpack打包教程相关推荐
- Nuxt3遇见的坑(四):图片动态渲染之后打包路径问题以及打包css样式问题
Nuxt3遇见的坑(四):图片动态渲染之后打包路径问题以及打包css样式问题 图片问题 我官网有个组件是非常多的图片,大概有40多张吧,那我肯定不能一张一张去写一个img,所以我用了v-for去循环渲 ...
- webpack打包路径更改_扫盲: Webpack 从扫盲到手撸(上)
鹿哥,作为前端初学者,能不能给扫盲一下 webpack,毕竟这东西在学校项目中用到的少,还是特别想了解一下的. 说起 webpack,小鹿会专门出一个系列,从简单的扫盲到手撸,这是一个过程,只要能踏实 ...
- webstrom中打包的详细_webpack打包体积优化
webpack webpack打包体积优化 webpack官方定义 webpack 是一个模块打包器.webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使 ...
- webpack 打包第三方库_webpack打包分离第三方库和业务代码
使用webpack打包工程,通常会需要分离第三方类库和应用本身的代码,因为第三方类库更新频率不高,这样浏览器可以直接从缓存读,不需要项目每次上线再获取一次. 以react为例,正常情况下,最初是这么配 ...
- webpack打开项目命令_webpack打包好的页面在项目中怎么运行?
使用webpack打包好了页面和相关的js文件,然后命令输入webpack-dev-server,再浏览器中输入: http://localhost:9090/WebRoot... 打开页面能正常的加 ...
- webpack 打包第三方库_Webpack 打包第三方代码库
共四篇文章都是在总结 Webpack.其中,[译]为什么要 Webpack 写了使用 Webpack 的动机和它的显著特征.其余三篇,主要是围绕怎么解决 Webpack 构建出来的文件太大展开,分别是 ...
- 简单地使用webpack进行打包,一些常见打包错误
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependenc ...
- 打包成单独的HTML文件,【WEBPACK】分离css单独打包
时间:2018-11-21 00:58:56 这篇文章非常非常早了,webpack4下已经无法用了, 最新可以看这里webpack实战场景系列 CHANGELOG 2018-02-08 14:46:0 ...
- javafx打包路径问题_关于JavaFX的最常见问题
javafx打包路径问题 上周,我在斯德哥尔摩的Jfokus 2012上做了一个关于JavaFX的演讲,当时我意识到每次活动都会问三个问题. 似乎有一个普遍的兴趣,所以我尝试在这篇文章中回答他们(尽可 ...
最新文章
- 98年“后浪”科学家,首次挑战图片翻转不变性假设,一作拿下CVPR最佳论文提名​...
- 如何在 Linux 中创建一个共享目录
- 26期Linux20180531 单用户 救援模式 克隆虚拟机 linux机器相互登录
- Mybatis 实现SQL拦截并在控制台打印SQL和参数
- vs(visual studio)调试功能里各个按钮的意义及使用方法?
- 【theano-windows】学习笔记十九——循环神经网络
- SpringMVC接受List的几种方式
- Mybatis(11)连接池基本介绍
- 带看板娘玩法指导的贪吃蛇小游戏源码
- Delphi单元文件基本结构
- 为什么运行review manager很卡顿_手机明明没坏,为什么声音开到最大依然很小?原来问题在这里...
- cnpack多国语言控件帮助
- 判断丑数python_263. 丑数(Python)
- (14)树莓派B+使用L298N驱动控制四驱车并实现一个简单的web控制端
- 看视频可以倍速播放的(主流播放器都可以)
- PageRank算法实现
- centos查看php版本命令,查看CentOS版本方法
- Eclipse Javaee版本下载与安装(不含jdk)
- 这次我不再犹豫,也不再退缩,Python,你就是我要带走的剑,与我相伴浪迹天涯的剑
- 一本需要购买的图形学方面的好书:GPU精粹——实时图形编程的技术、技巧和技艺(附CD-ROM光盘一张) ...