手把手教学项目工程化：es6模块化、webpack打包
- es6模块化
- webpack打包
1.模块化
(1)定义：就是把单独的一个功能封装到一个模块中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。
(2)好处：方便代码的重用，从而提高开发效率，并且方柏霓后期维护。
2.舍弃的模块化规范
(1)浏览器模块化规范
AMD require.js 舍弃
CMD sea.js 舍弃
(2)服务器端 commonJS(尚在使用)
模块分为单文件模块和包
模块成员导出：module.exports和exports
模块成员导入：require("模块标识符")
3.大一统模块化规范-es6
（1）定义
- 每个js文件都是独立的模块
- 导入模块成员使用import关键字
- 导出模块成员使用export关键字
（2）流程
-
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
-
npm install --save @babel/polyfill
-
在项目根目录下创建文件abel.config.js
const presets = [
['@babel/env',{
targets:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
}
}]
]
module.exports = {presets};-
通过npx babel-node index.js 执行文件
（3）在项目中安装和配置webpack
- 运行npm install webpack webpack-cli -D 命令，安装webpack相关的包
- 在项目根目录下，创建 webpack.config.js 配置文件
- 在webpack.config.js文件中，初始化以下配置
module.exports = {
mode:"development" //mode用来指定开发模式development projection
}- 在package.json中设置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack"
}- 在终端中运行npm run dev，进行打包
D:\JCWeb\heima\day24\wp>npm run dev
> [email protected] dev D:\JCWeb\heima\day24\wp
> webpack
Hash: b102ba2b1e5eb4ea136c
Version: webpack 4.42.0
Time: 296ms
Built at: 2020-03-21 21:42:55
Asset Size Chunks Chunk Names
main.js 314 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 143 bytes {main} [built]
+ 1 hidden module（4）配置打包的入口和出口
|--默认
打包入口 src->index.js
打包出口 dist->main.js
|--修改 webpack.config.js
module.exports = {
// 编译模式
mode:"development",//development production
entry:path.join(__dirname,"./src/index.js"),//入口文件,绝对路径
output:{
path:path.join(__dirname,"./dist"),//出口文件，绝对路径
filename:"bundle.js"//输出文件名称
}
}(5)配置webpack自动打包功能
|--npm install webpack-dev-server -D，安装支持自动打包的工具
|--修改package.json -> scripts中的dev
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},|--将src->index.html 中，引用路径改为/buldle.js
|--运行npm run dev 重新打包
|--使用localhost:8080/src/进行查看自动打包效果
注意：webpack-dev-server会启动一个实时打包的http服务器
webpack-dev-server会打包生成的输出文件，默认房子啊项目根目录下
(6)配置html-webpack-plugin生成预览页面
|--运行 npm install html-webpack-plugin -D，生成预览页面
|--修改webpack.config.js 文件头部区域，添加
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({//创建插件的实例对象
template:"./src/index.html",//指定要用到的模板文件
filename:"index.html"//指定生成的文件名称，该文件存在于内存中，在目录中不显示
})|--修改webpack.config.js 文件中向量暴露的配置对象，新增如下配置节点
plugins:[htmlPlugin]//plugins数组是打包期间会用到一些插件列表
(7)配置自动打包的相关参数
--open 打包完成后自动打开浏览器页面
--host 配置ip地址
--port 配置端口号
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000"
(8)通过loader打包非js文件
在实际开发中，webpack默认只能打包处理以js后缀结尾的模块
打包处理css文件
运行 npm i style-loader css-loader -D
在webpack.config.js的module->rules数组，添加规则
module:{
rules: [
//test：要匹配的文件类型 use：对应要调用的loader
{ test: /\.css$/, use: ['style-loader', 'css-loder'] }
]
}打包处理less文件
npm install less-loader less -D
{ test: /\.less$/, use: ['style-loader', 'css-loader', "less-loader"] }
打包处理scss文件
(9)配置postCSS自动添加css前缀
npm i postcss-loader autoprefixer -D
在根目录下创建postcss.config.js文件
const autoprofixer = require("autoprefixer");//导入自动添加前缀的插件
module.exports = {
plugins:[autoprofixer]//挂载插件
} 在webpack.config.js的module->rules数组中，修改css的loader规则
module:{
rules:[
{ test: /\.css$/, use: ['style-loader', 'css-loader',"postcss-loader"] }
]
}(10)打包样式表中的图片和字体文件
npm i url-loader file-loader -D
module->rules
{test:/\.jpg|png|gif$/,use:"url-loader?limit=45066"}
?后面的loader的参数 limit用来指定图片大小，单位byte 只有小于limit的图片才会转为base64图片。
以上是webpack打包学习内容。
