深圳商城网站哪家做的好,湛江网站建设制作维护,网站打开出现建设中,html5网站开发环境的搭建webpack
为什么?
把静态模块内容#xff0c;压缩#xff0c;整合#xff0c;转译等(前端工程化)
把less/sass转成css代码把ES6 降级成ES5支持多种模块文件类型#xff0c;多种模块标准语法
vite
为什么不直接学习vite 而学习webpack
因为很多项目还是基于webpack来进…webpack
为什么?
把静态模块内容压缩整合转译等(前端工程化)
把less/sass转成css代码把ES6 降级成ES5支持多种模块文件类型多种模块标准语法
vite
为什么不直接学习vite 而学习webpack
因为很多项目还是基于webpack来进行构建的所以还要掌握webpack
案例封装utils包校验用户名和密码长度 在index.js种使用使用webpack打包
步骤
1.新建项目文件夹初始化包环境
2.新建src源代码文件夹(书写代码)
3.下载webpack webpack-cli 到项目(版本独立)
4.项目种允许工具命令采用自定义命令的方式(局部命令)
5.自动产生dist分支文件夹(压缩和优化后用于最终运行的代码)
总结
在package.json中自定义命令
scripts: {test: echo \Error: no test specified\ exit 1,build:webpack},如何运行package.json 里的自定义命令
npm run 自定义命令修改webpack打包入口和出口
步骤:
1.项目根目录新建webpack.config.js配置文件
2.导出配置对象配置入口出口文件路径
//webpack.config.js
const path require(path)module.exports{// 入口entry:path.resolve(__dirname,src/main.js),// 出口 path 路径 filename 文件名output:{path:path.resolve(__dirname,dist),filename:my-first-webpack.bundle.js}
}自动生成html文件
HtmlWebpackPlugin 简化了 HTML 文件的创建
步骤:
1.下载本地软件包
2.配置webpack.config.js让webpack拥有插件的功能
3.指定以public/index.html为模板复制到dist/index.html ,并自动引入其他打包后资源 plugins:[new HtmlWebpackPlugin({// 以指定的html文件为生成模板template:path.resolve(__dirname,public/index.html)})]打包css模块
注意:webpack默认只识别js和json文件内容
加载器 css-loader 解析css代码
加载器style-loader 把解析后的css代码插入到DOM
步骤:
1.准备css文件导入到src/main.js中 (压缩转移处理)
2.下载css-loader 和style-loader本地软件包
3.配置webpack.config.js 让webpack拥有该加载器功能
4.打包后运行dist/index.html
打包less模块
加载器 less-loader 把less代码编译为css代码还需要依赖less软件包
步骤:
1.准备less样式导入到src/main.js中 (压缩转移处理)
2.下载less 和less-loader本地软件包
3.配置webpack.config.js 让webpack拥有该加载器功能
4.打包后运行dist/index.html
打包图片
webpack5 内置了资源模块的打包无需下载额外的loader
步骤:
1.准备图片素材到src/assets中
2.在index.less中给body添加背景图
3.在main.js中给img标签添加logo图片
4.配置webpack.config.js 让webpack拥有该加载器功能
5.打包后运行dist/index.html
