进入vscode
新建文件夹
新建目录
image.png
dist为打包输出目录
src为源码目录
Ctrl+~打开终端
执行初始化命令
npm init -y会多一个文件（注意：项目文件夹名称中不要有中文）
image.png
类似maven中的pom文件
演示实例，给一堆li加背景色
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./main.js"></script>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
</ul>
</body>
</html>
执行命令下载jquery
npm i jquery -S
main.js
// 程序入口js
import $ from 'jquery'
$(function(){
$('li:odd').css('background','red') // 奇数红
$('li:even').css('background','green') // 偶数绿
})
运行html会发现不支持es6语法
执行打包命令
webpack .\src\main.js -o .\dist\bundle.js
在html中直接引入<script src="../dist/bundle.js"></script>
在打开html，看到颜色
通过以上示例，可以看出webpack的功能
- 1.能处理 js文件的相互依赖关系（只需要有入口main.js就可以，理想状态下，但一般不够）
- 2.处理兼容问题，打包
注意：此时修改main.js不会影响bundle.js，每次修改需要重新打包
解决办法：
在项目根目录新建配置文件
img
const path = require('path')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
output :{
path : path.join(__dirname,'./dist') ,// 指定输出目录
filename : 'bundle.js' // 这是指定输出的文件名称
}
}
然后，直接执行webpack命令，就可以完成打包
项目中修改频率十分频繁，每次修改完毕然后重新打包还是太麻烦了，我们安装一个新工具webpack-dev-server来完成自动打包编译功能
扫描二维码关注公众号，回复：
6523060 查看本文章
# 本地安装webpack
npm i webpack -D
# 安装到项目的本地开发依赖 -d 本地安装，没有全局安装
# 不能再终端中直接运行名，只有全局 -g 安装的才能在终端正常执行
npm i webpack-dev-server -D
# 下载安装webpack-cli
npm iwebpack-cli -D
添加脚本命令
将webpack.config.js修改成
const path = require('path')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
output :{
publicPath: 'dist' ,// 指定输出目录
filename : 'bundle.js' // 这是指定输出的文件名称
}
}
执行·npm run dev·启动项目，再修改js，不许要重新打包
注意:
webpack不会实时更新修改，就只是一个打包工具，webpack-dev-server会实时自动更新修改
webpack打包输出路径，output字段为path，webpack-dev-server打包输出路径，output字段为publicPath(此值为空时默认是项目根目录)
webpack打包输出的文件，是真的存在于物理地址path中，而webpack-dev-server打包输出的文件，是保存在内存中的，在项目目录中是找不到的。
如果我们没有在webpack.config.js中指定publicPath: 'dist',那么在html中，引用的js文件路径应该是<script src="/bundle.js"></script>
完善配置
// --open表示启动自动打开浏览器
// --port 指定端口
// --contentBase src 自动进入src目录
// --hot每次修改，不在重新生成文件，而是修改原有文件
"dev": "webpack-dev-server --open --port 9999 --contentBase src --hot"
如何打包html
# 安装html打包插件
npm i html-webpack-plugin -D
webpack.config.js
const path = require('path')
// 导入插件
// 作用：
// 1.自动在内存中生成一个html;
// 2.自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
output :{
// publicPath: 'dist' ,// 指定输出目录
filename : 'bundle.js' // 这是指定输出的文件名称
},
plugins:[
// 创建一个在内存中生成html页面的插件
new htmlWebpackPlugin({
template : path.join(__dirname,'./src/index.html'), // 指定模板页面
filename : 'index.html' // 指定生成的页面名称
})
]
}
而且！！！html中不需要在引入bundle.js，因为该插件会自动帮我们追加bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <script src="/bundle.js"></script> -->
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
</ul>
</body>
</html>
css文件的处理
这里我们不在推荐使用直接link的方式了，因为还是会有2次请求
项目目录
在main.js入口文件中进行导入
// 程序入口js
// 导入jquery
import $ from 'jquery'
// 导入css
import './css/index.css'
保存后会报错无法使用，因为webpack只能打包处理js类型的文件，我们需要安装第三方loader 加载器
npm i style-loader css-loader -D
在webpack.config.js新增一个配置节点module,它是一个对象，在rules属性中，存放所有第三方模块匹配规则
const path = require('path')
// 导入插件
// 作用：
// 1.自动在内存中生成一个html;
// 2.自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
output :{
// publicPath: 'dist' ,// 指定输出目录
filename : 'bundle.js' // 这是指定输出的文件名称
},
plugins:[
// 创建一个在内存中生成html页面的插件
new htmlWebpackPlugin({
template : path.join(__dirname,'./src/index.html'), // 指定模板页面
filename : 'index.html' // 指定生成的页面名称
})
],
module : {
rules : [ // 所有第三方模块匹配规则
// 匹配以.css结尾的的文件，使用style-loader，css-loader处理，顺序从右到左调用
// 即css-loader先处理，style-loader后处理，都处理完毕，交给webpack打包
{test: /\.css$/,use: ['style-loader','css-loader']}
]
}
}
npm run dev 运行查看css文件是否生效
less和scss打包处理
main.js入口文件
import './css/index.css'
import './css/index.less'
import './css/index.scss'
如果安装过程中有异常，可以选用cnpm下载试一试
# 安装cnpm
npm i cnpm -g
# 安装less和less-loader
# less-loader内置依赖less，不许要在配置文件中配置less,sass同理
npm i less -D
npm i less-loader -D
npm i sass -D
npm i sass-loader -D
cnpm install node-sass@latest
配置文件
const path = require('path')
// 导入插件
// 作用：
// 1.自动在内存中生成一个html;
// 2.自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
output :{
// publicPath: 'dist' ,// 指定输出目录
filename : 'bundle.js' // 这是指定输出的文件名称
},
plugins:[
// 创建一个在内存中生成html页面的插件
new htmlWebpackPlugin({
template : path.join(__dirname,'./src/index.html'), // 指定模板页面
filename : 'index.html' // 指定生成的页面名称
})
],
module : {
rules : [ // 所有第三方模块匹配规则
// 匹配以.css结尾的的文件，使用style-loader，css-loader处理
{test: /\.css$/,use: ['style-loader','css-loader']},
{test: /\.less$/,use: ['style-loader','css-loader','less-loader']},
{test: /\.scss$/,use: ['style-loader','css-loader','sass-loader']}
]
}
}
值得一提的是，从webpack2.x开始，style-loader中的-load必须要写，而1.x版本中是不写的
转载于:https://www.jianshu.com/p/7cf3c01248fa