Webpack的使用
- 简介
- Webpack是一个其那段资源加载/打包工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源
- 作用
- 可以将多种静态资源js、css、less转换成一个静态文件,减少了页面的请求
- 使用方式
- 全局安装Webpack(尽量在项目目录中执行cmd命令)
npm install -g webpack webpack-cli
- 在项目目录的js目录中创建几个js文件(之间的关联任意)。例如common.js、index.js、about.js、main.js(入口js文件)等等
- 打包(只打包js文件)
- 在项目根目录中创建配置文件webpack.config.js(文件名最好固定,内容结构固定)
// Node.js内置模块 const path = require("path"); module.exports = { // 配置入口文件 entry: "./src/assets/js/main.js", output: { // 输出路径,__dirname:当前文件所在路径,最好事先创建好 path: path.resolve(__dirname, "./dist"), // 输出文件 filename: "bundle.js" } }
- 命令行执行编译命令
- cmd窗口执行
webpack # 这个会有警告信息 或者 webpack --mode=development # 这个没有警告信息
- cmd窗口执行
- 完成js文件的打包
- 在项目根目录中创建配置文件webpack.config.js(文件名最好固定,内容结构固定)
- 同样在项目目录的css目录中创建几个css文件,然后在main.js(入口js文件)引入css文件
- 安装css加载工具
npm install --save-dev style-loader css-loader
- 上面的webpack.config.js配置文件中添加内容(和output键同级)
module: { rules: [ { // 打包规则应用到以css结尾的文件上 test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }
- 打包执行同样的命令即可
- 全局安装Webpack(尽量在项目目录中执行cmd命令)
热门相关:超武穿梭 豪门闪婚:帝少的神秘冷妻 寂静王冠 霸皇纪 薄先生,情不由己