【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

  1. 配置

    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

  1. 写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

  1. 写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不需要

  1. 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

  1. 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

  1. 下载包

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

  1. 配置

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

  2. 运行项目

npx webpack-dev-server | webpack serve

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

相关推荐
幼儿园的小霸王10 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
Amd79412 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You12 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
契机再现18 小时前
babel与AST
javascript·webpack·typescript
前端李易安1 天前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
loey_ln1 天前
webpack配置和打包性能优化
前端·webpack·性能优化
Amd7941 天前
Nuxt.js 应用中的 webpack:compile 事件钩子
webpack·自定义·编译·nuxt.js·构建·钩子·逻辑
三天不学习2 天前
前端工程化-node/npm/babel/polyfill/webpack 一文速通
前端·webpack·npm
前端青山2 天前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
前端与小赵2 天前
什么是Webpack,有什么特点
前端·webpack·node.js