1、 新建一个项目文件夹
快速初始化项目 npm init -y
,。
注意:输入npm init -y
初始化项目,-y
可以让你省略去不停的yes
2、创建文件层级结构
创建一个src和dist文件夹,src放项目源码,dist放webpack打包后的文件。
main.js 是入口文件
3、引入依赖
注意:-S 安装到上线环境,-D 安装到开发环境
【注】页面中引入过多的静态文件会导致网页加载速度慢,所以我们在入口文件main.js中可以使用es6或者node方法引入jquery。
页面中引入jquery需要用script标签,那么js中如何引入jquery呢 ?
(1) 初始化项目,下载依赖包
npm i jquery -S
(2) js中引入jquery
import $ from jquery;
但是浏览器不识别import,所以需要webpack将浏览器不能识别的文件转化为可以识别的文件。
4、安装webpack
使用 cnpm 安装 webpack ,运行cnpm i webpack webpack-cli -D
在终端运行webpack
(运行wepack和运行node原理相同,运行node进入node环境,同理当前进入webpack环境,webpack命令就是webpack-cli提供的),此时报错,提示未设置mode选项。
5、建立webpack配置文件
在项目根目录下新建webpack.config.js
文件(注意它是一个js文件),当运行webpack的时候,会自动去项目根目录寻找并执行webpack.config.js
文件
//向外暴露一个打包的配置项
module.exports ={
mode:'development'
};
注意:是 exports ,不是 export
此时运行webpack仍旧报错,
我们src文件夹下有index.js文件,为什么还报错呢?
因为在 webpack 4.x 中,有一个很大的特性,默认的打包入口路径是 src -> index.js
,所以可将main.js改为index.js 或者 单独配置入口文件。
const path = require('path'); //核心模块
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'main.js'
}
};
此时再运行webpack进行打包,dist文件夹中自动生成了main.js
将dist文件夹下的main.js 引入 index.html中即可。
但是没修改一次src/main.js
都要重新webpack打包,很麻烦,所以接下来要配置实时打包编译
6、配置实时打包编译
cnpm i webpack-dev-server -D
webpack在全局安装了,所以可以在终端直接输入webpack启动。
但是webpack-dev-server并没有只安装在项目本地,所以不能直接输入webpack-dev-server启动,借助快速命令 npm run dev
直接在终端启动服务器命令 webpack-dev-server
或者 在 package.json 中配置
第一种写法:
"dev": "webpack-dev-server --open --port 3000 --contentBase src"
--open 运行后自动打开
--port 3000 更改端口号
--contentBase src 打开src根目录下的文件
第二种写法:
"dev": "webpack-dev-server"
在 webpack.config.js 中
module.exports = {
devServer: {
open: true,
port: 5000,
contentBase: 'src',
},
};
然后 npm run dev
,将会实时监听变化
注:实时监听变化编译后的文件,并不是dist/main.js
7、文件编译到了哪里?
当前相当于启动了一个小型服务器
//当前项目运行在8080端口
Project is running at http://localhost:8080/
//项目托管于根路径下
//相当于输入http://localhost:8080/main.js 能看到src/main.js编译后的文件
webpack output is served from /
此时的http://localhost:8080/main.js
才是实时编译后的文件,这个文件不是dist/main.js
为什么这个文件存在,但是确在localhost中看不到呢?
因为 webpack-dev-server将打包好的main.js托管到了内存中,所以在项目根目录中看不到。
为什么要放到内存中呢?
因为放到内存中快,如果将main.js放到磁盘上,每保存一次就要访问一次磁盘,对磁盘损失很大
所以把html也要托管于内存中去
8、把html托管于内存中
npm i html-webpack-plugin -D
修改webpack.config.js
const path = require('path'); //核心模块
const HtmlWebPackPlugin = require('html-webpack-plugin');// 导入 在内存中自动生成 index 页面的插件
const htmlPlugin = new HtmlWebPackPlugin({
//_dirname 代表当前文件所处目录,
template: path.join(__dirname, './src/index.html'), //源文件
filename: 'index.html' // 生成的内存中首页的名称
});
module.exports = {
// plugin是用于扩展webpack的功能,各种各样的plugin几乎可以让webpack做任何与构建先关的事情。
// plugin的配置很简单,plugins配置项接收一个数组,数组里的每一项都是一个要使用的plugin的实例,plugin需要的参数通过构造函数传入。
plugins: [htmlPlugin]
};
重新运行项目,直接打开页面,证明html已托管于内存中 直接打开index.html了
审查源码,html-webpack-plugin自动将js注入到html中了
9、处理css、less后缀名的文件
webpack只能打包处理js文件,如果处理css文件,需要其他loader
cnpm i style-loader css-loader -D
cnpm i less less-loader -D
import './css/index.css'
module.exports = {
module: {
rules: [
//style-loader: 将css插入到页面的style标签
{test: /\.css$/, use: ['style-loader', 'css-loader']},
// less处理成css,交给css-loader
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
]
}
}
webpack处理第三方文件的过程:
发现处理的不是js文件,就去配置文件中,查找有无第三方匹配规则,如果能找到对应规则,则调用对应的loader规则。调用的时候,是从后向前调用。当最后一个loader调用完毕,则将结果交给webpack打包合并,最终输出到index.js
注意:
1、webpack是基于node构建的,node可以使用的语法webpack都可以使用。
所以使用module.exports暴露,这是node语法,而不能使用export default,这是es6语法。
2、每次修改package.json 文件都要重新启动项目