1.模块化（CommonJS/ES6）
CommonJS规则
规定了导出和导入方式
导出: module.exports = {}
导入: const 变量 = require (“模块标识”)
ES6规范
导出: export 或 export default {}
导入: import 变量名 from “模块标识”
开发环境: development 生产环境: production
webpack本身是node的一个第三方模块包，用于打包代码
现代javascript应用程序的 静态模块打包器
webpack作用:
把很多文件打包整合到一起，缩小项目体积，提高加载速度
webpack基本使用:
总结：src并列出，生成了一个dist目录和打包后一个默认的main.js文件
src下开发环境，dist是打包后，分别独立
打包后格式压缩，变量压缩等
webpack配置
webpack入口和出口
告诉webpack从哪开始打包，打包后输出到哪里
默认入口: ./src/index.js
默认出口: ./dist/main.js
webpack配置: webpack.config.js
import path = require('path')
module.exports = {
entry: "./src/main.js", //入口
output:{
path:path.join(__dirname,"dist"), // 出口文件
filename:"bundle.js" //出口文件名
}
}
修改package,json 自定义打包命令 - 让webpack使用配置文件
scripts: {
build:"webpack"
}
打包流程图
重点:所有要被打包的资源都要跟入口产生直接/间接的引用关系
插件-自动生成html文件
html-weback-plugin 插件， 让webpack打包后生成html文件并自动引入打包后的js
webpack.config.js配置
//引入html-weback-plugin插件
import HtmlWebpackPlugin =require('html-weback-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: ‘./public/index.html’
})
]
}
加载器 - 处理css文件
loaders加载器, 可让webpack处理其他类型的文件, 打包到js中
原因: webpack默认只认识 js 文件和 json文件
module.exports = {
// ...其他代码
module: {
rules: [ // loader的规则
{
test: /.css$/, // 匹配所有的css文件
// use数组里从右向左运行
// 先用 css-loader 让webpack能够识别 css 文件的内容并打包
// 再用 style-loader 将样式, 把css插入到dom中
use: [ "style-loader", "css-loader"]
}
]
}
}
总结: 万物皆模块, 引到入口, 才会被webpack打包, css打包进js中, 然后被嵌入在style标签插入dom上
webpack-dev-server自动刷新
目标: 启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问
总结: 以后改了src下的资源代码, 就会直接更新到内存打包, 然后反馈到浏览器上了
webpack-dev-server配置
module.exports = {
// ...其他配置
devServer: {
port: 3000 // 端口号
}
}
