webpack常见配置
- 1.webpack配置
- 2.打包CSS样式资源
- 3.打包html资源
- 4.打包图片资源
- 5.打包其他资源字体图标
- 6.自动打包
- 7.开发环境配置
- 8.提取css成单独文件
- 9.css兼容性处理
- 10.js语法检查eslint
- 11.js兼容性处理
- 12.js压缩
- 13.html压缩
- 14.生产环境配置
1.webpack配置
1.ES6模块化的基本语法:
默认导出语法: export default 默认导出的成员;
默认导入语法: import 接受名称 from '名称绝对路径'
1.1直接导入执行模块化,不需要 导出;
export default 名字;
2.webpack: 前端项目结构打包工具:
好处: 模块化支持, 代码压缩, js兼容问题, 性能优化;
3.webpack使用:
-
-
-
新建webpack.config.js文件:
-
在package.json里面的 script字段里面 添加:
"dev":"webpack"
-
打包 npm run dev
4.webpack五大核心
1.1 Entry ' '
入口(Entry)指示 Webpack 以哪个文件为入口起点开始打包, 分析结构内部依赖图
1.2Output {}
输入(Output)指示 Webpack 打包后的资源 bundles 输出到哪里去 , 以及如何命名
filename:打包后的文件名 path:打包的路径和文件夹名
1.3Loader(1.下载, 2.使用)
loader 让 Webpack 能够去处理些 JavaScript 文件(webpack自身 只 理解JavaScript)
module {rules[ {test: , use:[] }....] }
1.4Plugins (1.下载, 1.引入, 3.使用) []
插件(Plugins)可以用于执行范围更广的任务.插件的范围包括, 从打包优化和压缩, 一直到重新定义环境中的变量等
1.5Mode ' '
模式(Mode)指示 Webpack 使用相应模式的配置
development:开发模式 ====>能让代码本地调试运行的环境
production:生产模式====>能让代码优化上线运行的环境
/*webpack.config.js*/ //resolve用来拼接绝对路径的方法 const {resolve} = require('path'); module.exports = { entry: './src/js/index.js', //入口文件,webpack从这里开始打包 output: { filename: 'build.js', //输出文件名 path: resolve(__dirname, 'build') //输出路径,一般采用绝对路径 //__dirname nodejs的变量,代表当前文件目录的绝对路径 }, //loader处理那些非JavaScript文件 module: { rules:[ //详细loader配置,不同文件配置不同loader ] }, plugins: [ //插件,执行更大更复杂的任务 ], //打包模式 mode: 'development' //development:开发环境,production:生产环境
2.打包CSS和scss样式资源
用到的包:npm i style-loader css-loader -D // css的包
npm install sass-loader node-sass -D //sass用的包
1 /* 2 webpack.config.js webpack的配置文件 3 作用: 指示 webpack 干那些活(当你运行 webpack 指令的时候,会加载里面的配置) 4 所有构建工具都是基于ndoe.js平台运行的~模块化默认采用commonjs 5 */ 6 7 // 使用node里的变量,用来拼接绝对路径 8 const {resolve} = require('path') 9 10 module.exports={ 11 // webpack配置 12 // 入口起点 13 entry:'./src/index.js', 14 // 输入 15 output:{ 16 // 输入文件名 17 filename:'bulit.js', 18 // 输出路径 19 // __dirname node.js变量, 代表当前文件的目录绝对路径 20 path: resolve(__dirname,'build') 21 }, 22 //loader的配置 23 module:{ 24 rules:[ 25 { 26 test:/\.css$/, // 匹配哪些文件 以css结尾的文件 27 use:['style-loader','css-loader'] 28 }, 29 { 30 test:/\.scss$/,// 匹配以scss结尾的文件 31 use:['style-loader','css-loader','sass-loader'] 32 } 33 ] 34 }, 35 // plugins的配置 36 plugins:[ 37 38 ], 39 // 模式 40 mode:'development', 41 // mode: 'production' 上线模式 42 }
3.打包html资源
/*
用到的包 : npm install html-webpack-plugin -D // 插件 webpack.config.js webpack的配置文件 作用: 指示 webpack 干那些活(当你运行 webpack 指令的时候,会加载里面的配置) 所有构建工具都是基于ndoe.js平台运行的~模块化默认采用commonjs */ // 使用node里的变量,用来拼接绝对路径 const {resolve} = require('path') const HtmlWebPackPlugin = require('html-webpack-plugin')// 引入插件 module.exports={ // webpack配置 // 入口起点 entry:'./src/index.js', // 输入 output:{ // 输入文件名 filename:'bulit.js', // 输出路径 // __dirname node.js变量, 代表当前文件的目录绝对路径 path: resolve(__dirname,'build') }, //loader的配置 module:{ rules:[ ] }, // plugins的配置 plugins:[ new HtmlWebPackPlugin({ template:'./src/index.html' }) ], // 模式 mode:'development', // mode: 'production' 上线模式 }
4.打包图片资源url 和 img
// 用的的包: npm install url-loader file-loader -D //解决url插入的图片 // cnpm i html-loader -D 命令 // 解决html插入的图片 const {resolve} = require('path') const HtmlWebPackPlugin = require('html-webpack-plugin')//引入html插件 const htmlPlguin = new HtmlWebPackPlugin({ template:'./src/index.html' }) module.exports={ entry:'./src/index.js', output:{ filename:'bulit.js', path:resolve(__dirname,'build') }, module:{ rules:[ { test:/\.scss$/,// 匹配以scss结尾的文件 use:['style-loader','css-loader','sass-loader'] }, { // 问题: 默认处理不了html中img图片 // 处理图片资源 test:/\.(jpg|png|gif)$/, loader:'url-loader', options:{ // 图片大于小于8kb,就会被转换成base64处理 // 优点:减少请求数量, (减轻服务器压力) // 缺点:图片体积更大 (文件请求速度更慢) limit: 8 *1024, // 如果提示报错:是因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs // 解析时会出问题:[object Module] // 解决方法: esModule:false, // 给图片进行重命名 // [hash:10]取图片的hash的前10位 // [ext]取文件原来扩展名 name:'[hash:10].[ext]' } }, { // 处理html文件的img图片 (负责引用img,从而能被url-loader进行处理) test:/\.html$/, loader:'html-loader' } ] }, plugins:[htmlPlguin], mode:'development' }
5.打包其他资源字体图标
// 用到的包: cnpm file-loader(果跑过打包图片的npm,就不用再跑了) const {resolve} = require('path') const htmlWebpackPlugin = require('html-webpack-plugin')// html插件 const htmlPlguin = new htmlWebpackPlugin({ template:'./src/index.html' }) module.exports= { entry:'./src/index.js', output:{ filename:'built.js', path:resolve(__dirname,'build') }, module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] }, // 打包其他资源(除了html/js/css资源以外的资源) { // 排除html/js/css资源 exclude:/\.(css|html|js)$/, loader:'file-loader', options:{ name:'[hash:10].[ext]'//打包的名字取10位 } } ] }, plugins:[ htmlPlguin // 使用那个插件 ], mode:'development' }
6.自动打包
/* 1.运行 cnpm install webpack-dev-server -D 包 2.打开webpaack.config.js文件 添加配置如下: 3.运行 npx webpack-dev-server */ const {resolve} = require('path') const htmlWebpackPlugin = require('html-webpack-plugin')// html插件 const htmlPlguin = new htmlWebpackPlugin({ template:'./src/index.html' }) module.exports= { entry:'./src/index.js', output:{ filename:'built.js', path:resolve(__dirname,'build') }, module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] }, // 打包其他资源(除了html/js/css资源以外的资源) { // 排除html/js/css资源 exclude:/\.(css|html|js)$/, loader:'file-loader', options:{ name:'[hash:10].[ext]'//打包的名字取10位 } } ] }, plugins:[ htmlPlguin ], mode:'development', // 开发服务器 devServer: 用来自动化 (自动编译, 自动打开浏览器, 自动刷新浏览器~~) // 特点: 只会在内存中编译打包, 不会有任何输出 // 启动 devServer指令为: npx webpack-dev-server(npx一直向上找包) devServer:{ // 项目构建后路径 contentBase:resolve(__dirname,'build'), // 自动gzip压缩 compress:true, // 端口号 port:3000, // 自动打开浏览器 open:true, } }
7.开发环境配置
/* 开发环境配置:能让代码运行 */ /* webpack 会将打包的结果输出出去 npx webpack-dev-server 只会在内存中编译打包,没有输出 */ const {resolve} = require('path') // 引入绝对路径path const HtmlWebPackPlugin = require('html-webpack-plugin')//引入html插件 const htmlPlguin = new HtmlWebPackPlugin({ template:'./src/index.html' }) module.exports={ entry:'./src/js/index.js', output:{ filename:'js/built.js', path:resolve(__dirname,'build') }, module:{ rules:[ { // 处理sass资源 test:/\.scss$/, use:['style-loader','css-loader','sass-loader'] }, { // 处理 css资源 test:/\.css$/, use:['style-loader','css-loader'] }, { // 处理图片资源 test:/\.(jpg|pmg|bmp|png|gif)$/, loader:'url-loader', options:{ limit:8 * 1024, // 处理图片的大小(超过8k)就转换为base64 name:'[hash:10].[ext]',// 处理后的名字长度 esModule:false, // 关闭es6模块化 outputPath:'img' // 输出到build文件里的 img文件夹里面 } }, { // 处理thml中img资源 test:/\.html$/, use:'html-loader' }, { // 处理其他资源 exclude:/\.(html|scss|css|js|jpg|pmg|bmp|png|gif)$/, loader:'file-loader', options:{ name:'[hash:10].[ext]', // url-loader是file-loader的优化版本,可以处理base64 outputPath:'iconfont' // 输出到iconfont文件夹 } } ] }, // 引入 html插件 plugins:[htmlPlguin], // 开发模式 mode:'development', // 自动打包 + 优化代码 devServer:{ // 项目构建后路径 contentBase:resolve(__dirname,'build'), // 自动gzip压缩 compress:true, // 端口号 port:3000, // 自动打开浏览器 open:true, } }
8.提取css成单独文件
// 运行: cnpm i mini-css-extract-plugin -D const {resolve} = require('path') const htmlWebpackPlugins = require('html-webpack-plugin')// 引入html插件 const cssWebpackPlugins = require('mini-css-extract-plugin')// 引入单独css插件 module.exports ={ entry:'./src/js/index.js', output:{ filename:'js/built.js', path:resolve(__dirname,'build') }, module:{ rules:[ { test:/\.css$/, use:[ // 创建style标签, 将样式放入 // 'style-loader', // 这个loader取代 style-loader; 作用: 提取js中的css成单独文件 cssWebpackPlugins.loader, // 将css文件整合到js文件中 'css-loader' ] } ] }, plugins:[ new htmlWebpackPlugins({ template:'./src/index.html' }), new cssWebpackPlugins({ filename:'css/built.css' }) ], mode:'development' }
9.css兼容性处理
// 运行 cnpm i postcss-loader postcss-preset-env -D 命令 const {resolve} = require('path') const htmlWebpackPlugins = require('html-webpack-plugin')// 引入html插件 const cssWebpackPlugins = require('mini-css-extract-plugin')// 引入单独css插件 const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')//压缩css // 设置node.js环境变量 // process.env.NODE_ENV = 'development'// 为开发环境 module.exports ={ entry:'./src/js/index.js', output:{ filename:'js/built.js', path:resolve(__dirname,'build') }, module:{ rules:[ { test:/\.css$/, use:[ cssWebpackPlugins.loader,// 单独的css文件 'css-loader', // css兼容性处理:postcss--> postcss-loader postcss-preset-env // 帮postcss找到package.json中的browserslist里面的配置,通过配置加载指定的css兼容性样式 /* "browserlist":{ // 开发环境 --> 设置node环境变量:process.env.NODE_ENV = 'development' "development":[ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], // 生产环境:默认是看生产环境 "production":[ ">0.2%", "not dead", "not op_mini all" ] }, */ { loader:'postcss-loader', options:{ ident:'postcss', plugins:()=>[ // postcss的插件 require('postcss-preset-env')() ] } }, ] } ] }, plugins:[ new htmlWebpackPlugins({ template:'./src/index.html' }), new cssWebpackPlugins({ filename:'css/built.css' }), // 压缩css new OptimizeCssAssetsWebpackPlugin() ], mode:'development' }
10.js语法检查eslint
// 运行: cnpm i eslint-loader eslint eslint-config-airbnb eslint-plugin-import -D const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'js/build.js', path: resolve(__dirname, 'build'), }, module: { rules: [ /* 语法检查: eslint-loader eslint 只检查自己写的源代码,不检查第三方库 设置检查规则: package.josn中 eslintConfig中设置 "eslintConfig":{ "extends":airbnb-base } 推荐使用airbnb规则 airbnb--> eslint-config-airbnb eslint-plugin-import */ { test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader', options: { // 自动修复 用户的格式 fix: true, }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }), ], mode: 'development', // 生产环境下会自动压缩js代码 };
11.js兼容性处理
// 包: npm i babel-loader @babel/preset-env @babel/core core-js -D const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'js/build.js', path: resolve(__dirname, 'build'), }, module: { rules: [ /* js兼容性处理:babel-loader @babel/preset-env @babel/core 1.基本js兼容性处理 --> @babel/preset-env 问题:只能转换基本语法,promise等高级语法无法转换 2.全部js兼容性处理 --> @babel/polyfill 在src里的index文件中导入即可 问题:只需解决部分兼容性问题。但是将所有兼容性代码全部引入,体积过大 3、需要做兼容性处理就做:按需加载 --> core-js // 最好是 1,3结合: // cnpm i babel-loader @babel/preset-env @babel/core core-js -D */ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { // 预设:指示babel做怎样的兼容性处理 presets: [ [ '@babel/preset-env', { // 按需加载 useBuiltIns: 'usage', // 指定core-js版本 corejs: { version: 3 }, // 指定兼容性做到哪个版本浏览器 targets:{ chrome: '60', firefox: '60', ie: '9', edge: '17', safari: '10' } } ] ], }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }), ], mode: 'development', // 生产环境下会自动压缩js代码 };
12.js压缩
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'js/build.js', path: resolve(__dirname, 'build'), }, module: { rules: [ ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }), ], mode: 'production', // 生产环境下会自动压缩js代码 };
13.html压缩
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'js/build.js', path: resolve(__dirname, 'build'), }, module: { rules: [ ], }, plugins:[ //html-webpack-plugin //功能:默认创建一个空的HTML,自动引入打包输出的所有资源(JS/Css) //需求:需要有结构的HTML文件 new HtmlWebpackPlugin({ // 复制./src/index.html文件,并自动引入打包输出的所有资源 template: './src/index.html', // 压缩html minify: { // 移除空格 collapseWhitespace: true, // 移除注释 removeComments: true, }, } ) ], mode: 'production', // 生产环境下会自动压缩js代码 };
14.生产环境配置
const { resolve } = require('path'); const htmlWebpackPlugins = require('html-webpack-plugin')// 引入html插件 const cssWebpackPlugins = require('mini-css-extract-plugin')// 引入单独css插件 const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')//压缩css // 定义node环境变量,决定使用browserslist的哪个环境 process.env.NODE_ENV = 'production'; // 复用loader const commonCssLoader = [ cssWebpackPlugins.loader,// 单独的css文件 'css-loader', { // 还需在package.json中定义browserslist loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => { require('postcss-preset-env')(); }, }, }, ] /* 正常来讲,一个文件只能被一个loader处理 当一个文件要被多个loader处理,那么一定要指定loader执行的先后顺序: 先执行eslint再执行babel */ module.exports = { entry: './src/js/index.js', // 入口文件 output: {// 出口文件 filename: 'js/build.js', path: resolve(__dirname, 'build'), }, module: { rules: [ { test: /\.css$/, use: [ ...commonCssLoader ], }, { test: /\.scss$/, use: [ ...commonCssLoader, // 引入loader 'sass-loader', ], }, { // 检查js语法eslint // 在package.josn中eslintConfig --> airbnb test: /\.js$/, exclude: /node_module/,// 排除 // 优先执行 enforce: 'pre', loader: 'eslint-loader', options: { fix: true // eslit自动帮你格式化js的不规范语法 } }, { // 在package.josn中eslintConfig --> airbnb test: /\.js$/, exclude: /node_module/,// 排除 loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { // 按需加载 useBuiltIns: 'usage', // 指定core-js版本 corejs: { version: 3 }, targets: { chrome: '60', firefox: '50', ie: '9', edge: '17', safari: '10' }, }, ], ], } }, {// 打包图片 test: /\.(jpg|png|gif)$/, loader: 'url-loader', options: { limit: 8 * 1024, name: '[hash:10].[ext]', outputPath: 'imgs',//保存的路径 esModule: false,//关闭es6模块化 name:'[hash:10].[ext]',// 处理后的名字长度 } }, {// 打包html插入的图片 test: /\.html$/, loader: 'html-loader' }, {// 打包其他文件, 除了上面打包过的 exclude: /\.(js|css|less|html|jpg|png|gif)$/, loader: 'file-loader', options: { outputPath: 'media',//保存的路径 name:'[hash:10].[ext]',// 处理后的名字长度 } } ], }, plugins: [ new cssWebpackPlugins({ // 打包成单独的css插件 filename: 'css/build.css', }), new OptimizeCssAssetsWebpackPlugin(), // 压缩css插件 new htmlWebpackPlugins({ // html插件 template: './src/index.html', minify: { collapseWhitespace: true,// 清除两边空白 removeComments: true// 清除备注 } }) ], mode: 'production' // 环境模式 };
package.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | { "devDependencies" : { "@babel/core" : "^7.10.2" , "@babel/preset-env" : "^7.10.2" , "autoprefixer" : "^9.8.0" , "babel-loader" : "^8.1.0" , "core-js" : "^3.6.5" , "css-loader" : "^3.5.3" , "eslint" : "^7.2.0" , "eslint-config-airbnb" : "^18.1.0" , "eslint-loader" : "^4.0.2" , "eslint-plugin-import" : "^2.20.2" , "file-loader" : "^6.0.0" , "html-loader" : "^1.1.0" , "html-webpack-plugin" : "^4.3.0" , "mini-css-extract-plugin" : "^0.9.0" , "node-sass" : "^4.14.1" , "optimize-css-assets-webpack-plugin" : "^5.0.3" , "postcss-loader" : "^3.0.0" , "postcss-preset-env" : "^6.7.0" , "sass-loader" : "^8.0.2" , "style-loader" : "^1.2.1" , "url-loader" : "^4.1.0" , "webpack" : "^4.43.0" , "webpack-cli" : "^3.3.11" , "webpack-dev-server" : "^3.11.0" }, "eslintConfig" : { "extends" : "airbnb-base" }, "browserslist" : { "development" : [ "last 1 chrome version" , "last 1 firefox version" , "last 1 safari version" ], "production" : [ ">0.2%" , "not dead" , "not op_mini all" ] }, "name" : "Webpack" , "version" : "1.0.0" , "main" : "index.js" , "dependencies" : {}, "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" }, "keywords" : [], "author" : "" , "license" : "ISC" , "description" : "" } |
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步