webpack手动命令打包
1、创建一个js文件,ES6模块化导出。
demo1.js:
2、再创建一个js文件,解构出上面文件导出的内容。
demo2.js:
3、如果现在我把demo2.js直接引入到html文件里面,情况是报错。为什么,因为是ES6语法,浏览器不能直接识别。那该怎么办呢,可以用webpack工具来配置。
4、我是全局安装webpack:npm install -g webpack-cli webpack
,然后通过命令webpack --mode development 要打包的文件 -o 输出文件名
指定输出模式为开发模式,将demo2.js文件用webpack来打包,输出到新的文件命名为outdemo2.js,然后引入html文件里。
5、然后就能在浏览器里查看执行结果了。
6、注意:如果在打包的时候没有指定mode,其实会有一串警告,而且在编译时会默认把代码压缩,因为默认是 production生产模式。
警告说你现在有两种模式,一种叫做production (默认生产环境),还有一种叫development (开发环境),而你没有指定任何一个。
mode是webpack4新增的一个选项,必须在生产环境production (自动压缩你的代码)和开发环境development (开发模式不会压缩你的代码)之中选择一个,不然就有警告。
webpack简便方式打包
上面的打包方法麻不麻烦,如果要自动打包要怎么办。看下面。
有个简便方式,不过对文件夹和文件有所要求,入口起点必须
使用默认的./src
和index.js
。然后控制台 webpack --mode production
即可打包,且自动把打包好的文件默认生成到./dist
文件夹下的main.js
中。
webpack配置流程
Webpack的配置文件叫 webpack.config.js
,配置完成后,可以直接在控制台输入webpack
进行打包。
(一)配置文件入口、出口、打包模式
1、配置单个文件
与简便方式打包不同,在配置文件里,这个入口出口地址可以自定义。
module.exports={
entry:"./src/index.js",//入口
output:{ //出口
path:__dirname+"/dist",//文件夹
filename:"outindex.js"//生成的文件名
}
}
把上面demo1.js后台demo2.js移入到./src下,然后重命名demo2.js为index.js。
结合上面的配置文件,在cmd中运行webpack
查看结果:
打包成功了,引入html文件里面也能运行,但我忘记指定模式了。
2、配置打包模式
webpack提供了production、development 两种打包模式。但 如果在每次打包的时候都要指定打包模式,很麻烦。其实可以在配置文件里面配置好打包模式。
只要在与entry、output同级处配置mode即可。
mode:"development"//开发模式指定为开发模式
3、配置多个文件
module.exports = {
// 将entry 设置成为一个对象,以键值对的形式设置多个入口起点
entry: {
index: "./src/index.js",
indexa: "./src/indexa.js"
},
output: {
path: __dirname + "/dist",
filename: "out[name].js"//[name] 代表的就是入口文件的key
},
mode: "development"
}
在.html中引入一下刚生成的文件:
然后能得到结果:
总之一句话,单入口—单出口;多入口—多出口。
(二)plugin插件
plugin,用于扩展webpack的功能。各种各样的plugin几乎可以让webpack做任何与构建相关的事情。
plugin的配置很简单,plugins
配置项接收一个数组
,数组里的每一项都是一个要使用的plugin的实例,plugin需要的参数通过构造函数传入。
下面介绍两个常用的插件:clean-webpack-plugin、html-webpack-plugin。
1、clean-webpack-plugin
该插件可以实现在打包时,清空原有的内容。
使用的场景是:打包时若修改入口起点的键名,会发现打包之后,之前的打包的文件也在。比如我将上面文件入口的两个文件改一下名字,改成indexx和indexxaa,我们看一下啥情况:发现之前的文件也还在,但我只想要最新生成的文件,岂不是还要手动删除!
其实是有解决办法的。如果想在打包的之后清空之前的内容,可以使用clean-webpack-plugin
这个插件。
(1)下载
cnpm install clean-webpack-plugin -D
/*
这里注意一个事儿:
与项目无关的插件用 -D(--save--dev)添加到 package.json的 devDependencies ;
有依赖关系的用-S(--save) 添加到 dependencies
*/
(2)引入
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
(3)使用
//plugins是一个数组 数组的每一项就是你使用的插件
plugins: [
new CleanWebpackPlugin()
]
(4)测试一下
我再次修改两个入口文件的键名key为indexxxxx、indexxaaxxxx,然后webpack运行一下。
1、html-webpack-plugin
该插件的主要作用:自动添加打包成功的内容到指定.html中。
(1)下载
由于 html-webpack-plugin:插件需要依赖 webpack webpack-cli,所以得把这两个依赖也下载。
cnpm install webpack webpack-cli -D
cnpm install html-webpack-plugin -D
或者直接一句话:
cnpm install --save--dev webpack webpack-cli html-webpack-plugin
(注意:即便是全局安装了webpack webpack-cli,在该项目中还是再次要安装到devDependencies中)
(2)引用
const HtmlWebpackPlugin = require("html-webpack-plugin");
(3)使用
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./index.html", // 指定模板地址,即要将内容注入的目标文件
hash: true, //为引入的地址增加后缀,用于清除缓存
filename: "home.html", // 将打包后新生成的.html文件名重置,默认是index.html
title: "我在学习webpack", //向编译好的页面中添加浏览器标题内容
minify:{
removeComments:true, //去除注释
// collapseWhitespace:true //压缩代码
}
})
]
(4)测试一下
写好模板.html文件,把title引入进来:
打包后,新生成home.html文件,看目录:
然后看看我们将打包的资源引入模板html后新生成的home.html的内容:(原模板文件是没有变化的)
(5)相关配置介绍:
设置页面标签:如果在配置中设置了title,那么必须在对应的 template 模版文件中添加,才能让title生效:
<title><%= htmlWebpackPlugin.options.title%></title>
取消注释:如果template模版中有注释,那么打包的内容也会有注释 。在生产环境中不需要注释,那么就可以设置minify
来配置。
关于更多插件的内容,若有兴趣研究请看官网plugin:https://www.webpackjs.com/plugins/
(三)webpack-dev-server
搭建一个开发中的服务器。(不是插件)
安装:npm install -g webpack-dev-server
。
运行命令:webpack-dev-server
,然后在浏览器运行:localhost:8080 ,就能看见模版的内容。
注意:在webpack配置文件中添加devServer相关配置,会发现dist这个文件夹里面的资源不再生成;而且如果先把dist文件删除,再启动服务,会发现不会再生成dist文件夹了 。为什么会这样?因为这个开发中的服务器把生成的内容保存在缓存中了。
配置1:在webpack.config.js中配置
devServer:{
open:true,//在浏览器中自动打开
port:"8081",//设置端口
host:"127.0.0.1"//访问地址
}
配置2:在package.json中配置
如果觉得 webpack-dev-server 麻烦的话,可以在package.json中配置,然后npm run start
启动
然后还得注意一个问题,有的时候使用webpack-dev-server来执行的时候,打开的页面并不是我们想要的home.html而是一个目录的形式,因为我们使用的是最新版本的,它会自动去寻找一个叫index.html的文件自动打开。但我们刚刚使用HtmlWebpackPlugin这个插件把主页面名改成了home.html,所以webpack-dev-server这个服务找不到了,那么接下来我们把主文件名改回默认的index.html,然后用服务打开,就可以啦。
可以参考下官网:开发中 Server(devServer)
(四)Loaders加载器/打包器
加载器/打包器/翻译器,可以将不同的文件类型(如typescript,css、scss、图片以及对老版本/新版本的JavaScript)转成浏览器能够识别的内容,方便我们使用。
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!
下面主要介绍三大种常见的loader。
1、style-loader与css-loader
webpack可以把以指定入口的一系列相互依赖的模块打包成一个文件,这里的模块指的不只是js,也可以是css。
style-loader用来引入css,css-loader用来动态创建style标签,塞到head标签里。所以,要一起下载这辆个依赖。
安装:npm install style-loader css-loader -D
使用:
新建一个assets
的静态资源文件夹 → 创建一个style.css
文件用来编写样式
在js入口文件引用样式:我们在index.js中引入吧
import "../assets/style.css"
在webpack.config.js中配置:
module: {
rules: [
{
test: /\.css$/, //正则匹配css文件
loader: ["style-loader", "css-loader"] //引用顺序不能变,先加载css,再插入到style中
}
]
}
在模板html中写入一个h1标签,打包后,打开最终的home.html文件:OK渲染成功。
2、Less-loader/sass-loader
(1)Less
需要安装相关依赖:cnpm install less-loader less -D
在assets
文件夹中创建less
文件,并且在入口js
引用:
@yellow:yellow;
body{
background-color: @yellow;
}
import "../assets/style.less"
在webpack.config.js中配置less:
module:{
rules:[
{
test: /\.less$/,
loader:["style-loader","css-loader","less-loader"] // 引用顺序不能变
}
]
}
(2)Sass
安装依赖:cnpm install sass-loader node-sass -D
在assets
文件夹中创建style.scss
文件,并且在入口js
引用:
$yellow:yellow;
body{
background-color: $yellow;
}
import "../assets/style.scss"
在webpack.config.js中配置sass,在rules中添加:
{
test: /.\.scss$/,
loader:["style-loader","css-loader","sass-loader"] // 引用顺序不能变
}
3、babel-loader(非常重要)
ES6 语法在开发中已经非常普及,甚至也有许多开发人员用上了 ES7 或 ES8 语法。然而,浏览器对这些高级语法的支持性并不是非常好。因此为了让我们的新语法能在浏览器中都能顺利运行,Babel 应运而生。
babel-loader:就是把es6 es7等这些语法转换成普通浏览器可以识别的javascript代码。
下载:官方提供了两种一个版本是8 版本7 ,我们使用最新的8
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
使用:
在webpack.config.js中添加
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, //设置哪些文件不处理
//use设置需要什么loader
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // 转换规则
}
}
}
]
}
官方babel-loader:https://www.webpackjs.com/loaders/babel-loader/
可以自己尝试编写一个es6的内容,打包,用低版本ie测试是否可以正常运行。
4、Vue Loader
注意:Vue Loader 是一个Webpack的 loader,它支持.vue
单文件组件的各个<template>
、<script>
和 <style>
打包成浏览器可以识别的内容。
官网Loader:https://www.webpackjs.com/loaders
拓展—Webpack常见概念
1、webpack的基本能力:处理依赖、模块化、打包
- 依赖管理:方便引用第三方模块,让模块更容易复用,避免全局注入导致的冲突,避免重复加载或者加载不必要的模块。
- 合并代码:把各个分散的模块集中打包成大文件,减少HTTP的链接的请求次数,可以减少、优化代码的体积。
- 各种插件:babel把ES6+转化为ES5-,eslint可以检查编译时的各种错误。
2、Webpack打包原理
webpack是把项目当作一个整体,通过给定的一个主文件,从这个主文件开始找到你项目当中的所有依赖的文件,使用loaders来处理它们,最后打包成一个或多个浏览器可识别的js文件。
3、webpack工作过程
1、解析配置参数,合并从(npm install 类似的命令)和webpack.config.js文件的配置信息,输出最终的配置信息;
2、注册配置中的插件,做出对应的反应;
3、解析配置文件中的entry入口文件,并找出每个文件依赖的文件,递归下去;
4、在递归每个文件的过程中,根据文件类型和配置文件中的loader找出对应的loader对文件进行转换;
5、递归结束后得到每个文件最终的结果,根据output配置生成代码;
总结
介绍了webpack手动的、自动的打包方法,然后在配置文件中实现自动化。其中注意四个核心概念 entry、output、loader、plugin,在使用的时候记得看官方文档。
参考博客:
webpack:https://www.jianshu.com/p/105123c1afbd
webpack-基础:https://www.jianshu.com/p/7b269991d07e
我的第一个webpack配置
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
index: "./src/index.js",
indexa: "./src/indexa.js"
},
output: {
path: __dirname + "/dist",
filename: "out[name].js"
},
mode: "development",
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./index.html",
hash: true,
filename: "home.html",
title: "我在学习webpack",
minify: {
removeComments: true, //去除注释
// collapseWhitespace:true //压缩代码
}
})
],
// devServer:{
// open:true,//在浏览器中自动打开
// },
module: {
rules: [
{
test: /\.css$/,//正则匹配css文件
loader: ["style-loader", "css-loader"]
}
]
}
}