【webpack开发环境下的配置】

webpack的五大核心

• entry入口
• output输出
• loader: 处理非js文件（相当于翻译webpack本身只能理解js）
• Plugins: 用于其他功能（压缩，优化等）
• mode： 模式 主要有开发模式和生产环境

实践

1. 下载包

npm i webpack webpack-cli -D

1. 全局安装,否则找不到webpack命令

sudo npm i webpack webpack-cli -g

webpack.config.js文件框架

// webpack.config.js文件 /**  * 作用：当运行webpack指令时，会加载里面的配置  * 所有的构建工具都是基于nodejs平台运行的，模块化默认采用commonjs  */ // 用来拼接绝对路径 const { resolve } = require('path') module.exports = {     entry: './src/index.js',     output: {         filename: 'build.js',         // __dirname:代表当前文件目录的绝对路径         path: resolve(__dirname,'build')     },     // loader配置     module: {         // 详细的loader配置         rules: [         ]     },     plugins: [         // 详细的插件配置     ],     // 模式     mode: 'development' } 

html文件处理

1. 下载包

npm i html-webpack-plugin -D

2. 配置

const HtmlWebpackPlugin = require('html-webpack-plugin');  plugins: [         // 详细的插件配置         // 不加参数，默认创建一个空的html，自动引入打包输出的所有资源       new HtmlWebpackPlugin({          template: './src/index.html', // 以该./src/index.html文件为模版创建一个html,并自动引入打包输出的所有资源       })       ], 

样式处理

css文件

1. 下载包

npm i css-loader style-loader -D

2. 写webpack配置

//webpack5 module: {   // 详细的loader配置   rules: [     {       test: /\.css$/,  //匹配那些文件,这里注意下webpack的版本，4版本需要加’‘，'/\.css$/'       use:[ //使用那些loader处理         //  use数组中loader执行顺序：从下往上执行         'style-loader', // 创建style标签，将js中的样式资源插入，添加到head中生效         'css-loader', // 将css文件变成commonjs模块加入js中，里面的内容是样式字符串       ]     }   ] }, 

less文件

1. 下载包

npm i css-loader style-loader less less-loader -D

2. 写webpack配置

//webpack5 module: {   // 详细的loader配置   rules: [     {       test: /\.css$/,  //匹配那些文件,这里注意下webpack的版本，4版本需要加’‘，'/\.css$/'       use:[ //使用那些loader处理         //  use数组中loader执行顺序：从下往上执行         'style-loader', // 创建style标签，将js中的样式资源插入，添加到head中生效         'css-loader', // 将css文件变成commonjs模块加入js中，里面的内容是样式字符串       ]     },     {       test: /\.less$/,//匹配那些文件,这里注意下webpack的版本，4版本需要加’‘，'/\.css$/'       use: [         'style-loader',// 创建style标签，将js中的样式资源插入，添加到head中生效         'css-loader', // 将css文件变成commonjs模块加入js中，里面的内容是样式字符串         'less-loader', // 将less文件编译成css文件       ]     }   ] }, 

图片处理

1. 下载包

npm i url-loader file-loader -D // webpack5不需要

2. webpack中的配置

{    test: /\.(jpg|png|gif|jpeg)$/, //处理图片   //  webpack5写法   type: 'asset',     parser: {       dataUrlCondition: {         maxSize: 8 * 1024 // 图片小于8kb，就会被base64处理，base64图片优点：减少请求数量（减轻服务器压力） 缺点：图片体积更大（文件请求速度慢),这个根据实际情况设置，一般是处理（12kb以下）       }     },       generator: {         filename: 'static/[hash:10][ext][query]', // 重命名图片的名字[hash:10] 保留hash值的前10位，[ext] 保留图片原扩展名[query]添加之前的query参数       },         // webpack4 写法         //  loader:'url-loader',  // 只使用一个loader可以用这种写法，多个loader用use数组         //  options: {         //   limit: 8 * 1024,           //    esModule: fasle,  // url-loader默认使用es6模块解析，而html-loader引入图片是commonjs,导致图片解析出错，所以得关闭url-loader的es6模块化         // }, } 

html中图片img

1. 下载包

npm i html-loader -D

2. webpack中的配置

{    test: /\.html$/,    loader: 'html-loader', // 处理html文件的img（负责引入img，从而被处理） } 

其他资源处理

其他资源: 指不需要处理的资源如字体图标

{     // 打包其他资源     exclude: /\.(css|js|html|png|jpg|less|json)/, //对应排除的文件根据需求修改     type: 'asset/resource',     generator: {       filename: 'static/[hash:10][ext][query]', // 重命名图片的名字[hash:10] 保留hash值的前10位，[ext] 保留图片原扩展名[query]添加之前的query参数     }  } 

devServer

1. 作用

// 开发服务器， devServer: 自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer指令为：npx webpack-dev-server

2. 下载包

npm i -D webpack-dev-server webpack-cli webpack

3. 配置

devServer: {      // 这里检测的是源文件中的index.html      static: './src/index.html', // 注意这里不能检测打包后的index.html文件，因为webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，所以打包后的index.html文件是没有任何变化的，所以检测他浏览器不能自动刷新      compress: true,      port: 3000,      open: true }, 

4. 运行项目

npx webpack-dev-server | webpack serve

以上两个命令都可以，任选一个就行