使用webpack前先要理解js模块化编程。
webpack官网
webpack中文文档
webpack是什么
webpack是模块化打包工具。用webpack可以自动分析模块的依赖关系，将所有用到的模块整合到一个js文件里。
用了webpack打包，可以减少浏览器请求数。
webpack能自动识别所有js的模块化规范，线下解决依赖问题，你不再需要requireJS这类工具。
webpack的安装
全局安装, webpack-cli 是命令行工具，在webpack 4.0之后和webpack本体分离
npm install webpack -g
npm install webpack-cli -g
本地安装
npm install webpack --save-dev
npm install webpack-cli --save-dev
推荐先全局安装，然后再项目目录下本地安装。
全局安装保证全局可以调用webpack。
nodejs的require只能获取到本地的webpack。所以本地也要装一份
webpack的使用
推荐使用方式二
//方式一 不使用配置文件
webpack ./src/index.js -o ./dist/bundle.js
//方式二 使用默认配置文件 默认是当前目录下的webpack.config.js
webpack
//方式三 使用制定配置文件
webpack --config webpack.config.js
webpack配置文件
在项目根目录下新建一个webpack.config.js，然后在里面写配置
配置参考
最简单的配置文件
var path=require('path')
module.exports={
mode:"development"， //有development（开发）和production（产品，会压缩代码） 不写默认production
entry:'./src/index.js', //源文件的入口文件
output:{
filename:'bundle.js' //输出文件
path:path.resolve(__dirname,'./dist') //输出目录
},
}
webpack的loader
配置loader可以自动对单个文件进行加工
loader可以帮你引入css，转换ts到js，转换scss到css等。
有css-loader,style-loader,babel-loader,scss-loader等等很多。
用代码引入css文件
首先安装css-loader和style-loader
npm install css-loader --save-dev
npm install style-loader --save-dev
在配置文件里加入规则
var path=require('path')
module.exports={
entry:'./src/index.js',
output:{
filename:'bundle.js'
path:path.resolve(__dirname,'./dist')
},
module:{
rules:[
{
test:/\.css$/, //用正则表达式匹配到所有.css文件
use:["style-loader","css-loader"], //对.css文件用loader进行加工
}
]
}
}
然后你就可以用代码引入css了
require("./style.css")
webpack html模板
用html-webpack-plugin插件,可以把html也加入打包
安装
npm install html-webpack-plugin --save-dev
配置
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
//*******
//中间其他配置省略
//******
plugins: [
// 加入 html 模板任务
new HtmlWebpackPlugin({
// 模板文件
template: 'src/index.html',
// 打包后文件名称，会自动放到 output 指定的 dist 目录
filename: 'index.html'
})
]
}
把index.html中的script标签可以删掉了，打包时会自动添加
webpack自动化
每次修改文件后，我们需要在cmd里输入webpack,然后切换到浏览器去刷新页面。还是感觉有点繁琐。
这些工作可以自动完成。
我们需要用到webpack-dev-server
//全局安装本地开发服务器
npm i webpack-dev-server -g
//运行 可以加--open表示立即自动打开浏览器
webpack-dev-server
用浏览器访问localhost:8080
每次你修改文件，点击保存后，系统会自动检测到，帮你编译，然后自动刷新浏览器页面。
webpack-dev-server自动编译后的代码是存放在内存中的。
其他插件
copy-webpack-plugin 把源文件目录的东西复制到输出文件目录，可以复制图片声音等
extract-text-webpack-plugin 分离css文件
clean-webpack-plugin 每次构建之前删掉dist目录，避免上一次构建的影响
min-css-extract-plugin分离css文件 代替extra-text-webpack-plugin 参考