webpack是什么
webpack是一种前端资源构建攻击，一个静态模块打包器webpack的五个核心概念
entry 入口文件output 输出指示(输出到哪里)loader 让webpack处理非javaScript文件plugins 插件，优化打包，压缩mode 配置文件 development 开发环境 production 生产环境初始化项目
npm init安装webpack
npm i webpack webpackcli -Dwebpack兼容性问题
安装4版本的webpack和3版本的webpack-cli npm i webpack@4 webpackcli@3 -D运行webpack
开发环境 webpack ./src/index.js -o ./build/build.js --mode=development 生产环境 webpack ./src/index.js -o ./build/build.js --mode=productionwebpack能处理js/json资源，不能处理css/img资源
webpack打包资源内置中间件path.join和path.resolve的区别
join是把各个path片段连接在一起， resolve把‘／’当成根目录esolve在传入非/路径时，会自动加上当前目录形成一个绝对路径，而join仅仅用于路径拼接css\less资源打包
各个包版本推荐
css-loader@4.2style-loader@1.1.3less-loader@5.0.0less@3.11.1打包命令webpack
创建webpack.config.js:
/* webpack配置文件 作用：指示webpack干哪些活 所有的构建工具都是基于nodejs平台运行的 模块化采用的common.js */ const {resolve} = require('path'); module.exports ={ // webpack配置 // 入口起点 entry: './src/index.js', // 输出 output: { filename: 'build.js', path: resolve(__dirname, 'build') }, // loader的配置 module: { rules:[ // 详细配置loader配置 { test: /\.css$/, // use中的执行顺序 从下到上 // npm i css-loader@4.2 style-loader@1.1.3 -D use: [ // 创建一个style标签将js中的样式资源插入进入 'style-loader', // 将css文件变成common.js模块加载js中，里面内容是样式字符串 'css-loader' ] }, { test: /\.less$/, use:[ 'style-loader', 'css-loader', // 将less加载成css文件 less-loader@5.0.0 less npm i less@3.11.1 'less-loader' ] } ] }, // 插件 plugins:[ ], // 模式 mode: 'development' //开发模式 }打包html资源
各个包版本推荐
html-webpack-plugin@3.2.0 /* loader 下载 使用 plugins 下载 引入 使用 */ const HtmlWebpackPlugin = require('html-webpack-plugin') plugins:[ // html-webpack-plugin html-webpack-plugin@3.2.0 // 作用：创建一个空的html文件 引入打包输出的所有资源（js/css） new HtmlWebpackPlugin({ // 复制'./src/index.js' 并自动引入打包输出的所有资源 template : './src/index.html' }) ],打包图片资源
用到的包以及对应的版本
url-loader@3.0.0file-loader@5.0.2html-loader@0.5.5注意点：关闭esModule 否则img中的不显示 file-loader不需要引入
webpack.config.js
const {resolve} = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports ={ entry:'./src/index.js', output:{ filename: 'build.js', path: resolve(__dirname,'./build') }, module: { rules: [ { test: /\.css$/, use:[ 'style-loader', 'css-loader', ] }, { // 下载两个包 url-loader@3.0.0 file-loader@5.0.2 // 问题默认处理不了html中img的图片 test: /\.(jpg|png|gif)$/, loader: 'url-loader', options: { // 图片大小小于8kb，就会被base64处理 // 优点：减少请求数量（减轻服务器压力） // 缺点：图片体积会更大（文件速度会更慢） limit: 8 * 1024, // 问题：因为url-loader在默认使用es6模块化解析，而html-loader引入图片是commonjs // 解析时会出现问题：[object Module] // 解决：关闭url-loader的es6模块化，使用commonjs解析 esModule: false, // [hash:10]取图片hash的前10位 // [ext]取文件原来扩展名 name: '[hash:10].[ext]' } }, { test: /\.html$/, // 处理html文件的img图片（负责引入img，从而被url-loader进行处理）html-loader@0.5.5 -D loader: 'html-loader', } ] }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html' }) ], mode: 'development', }打包其他资源
webpack.config.js
module:{ ....... // 打包其他资源（除了html/js/css资源） { exclude: /\.(css|js|html)$/, loader: 'file-loader', options: { name:'[hash:10].[ext]' } } ] },webpack-dev-server 的使用
包的下载
webpack-dev-server@3.10.3 module.exports ={ ...... // 开发服务器 devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器） // 特点：没有输出只会在内存中打包，不会有任何输出 // 启动devServer指令为： webpack-dev-server@3.10.3 devServer:{ contentBase: resolve(__dirname,'build'), // 启动gzip压缩 compress:true, // 使用localhost:3000进行查看 port:'3000', // 自动打开浏览器 open:true, } }开发环境的完整配置
webpack.config.js
// 开发环境的配置:能让代码运行即可 const {resolve} = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { filename: 'build.js', path: resolve(__dirname,'build') }, module: { rules: [ { test: /\.css$/, use:[ 'style-loader', 'css-loader', ] }, { test: /\.html$/, loader: 'html-loader', }, { test: /\.(jpg||png||jpg)$/, loader: 'url-loader', options: { limit: 8 * 1024, esModule: false, name:'[hash:10].[ext]' } }, { test: /\.less$/, use:[ 'style-loader', 'css-loader', 'less-loader' ] }, { exclude: /\.(html||css||js)/, loader: 'file-loader', options:{ name:'[hash:10].[ext]' } } ] } , plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html' }) ], devServer:{ contentBase: resolve(__dirname,'build'), compress: true, port: 3000, open: true }, mode: 'development' }
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
