webpack4从零学习常用配置(小结)-创新互联

webpack 的核心价值就是前端源码的打包，即将前端源码中每一个文件（无论任何类型）都当做一个 pack ，然后分析依赖，将其最终打包出线上运行的代码。webpack 的四个核心部分

我们提供的服务有：网站设计制作、成都做网站、微信公众号开发、网站优化、网站认证、乾安ssl等。为成百上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的乾安网站制作公司

entry 规定入口文件，一个或者多个
output 规定输出文件的位置
loader 各个类型的转换工具
plugin 打包过程中各种自定义功能的插件

webpack 如今已经进入 v4.x 版本，v5.x 估计也会很快发布。不过看 v5 的变化相比于 v4 ，常用的配置没有变，这是一个好消息，说明基本稳定。

前端工程师需要了解的 webpack

前端工程化是近几年前端发展迅速的主要推手之一，webpack 无疑是前端工程化的核心工具。目前前端工程化工具还没有到一键生成，或者重度继承到某个 IDE 中（虽然有些 cli 工具可以直接创建），还是需要开发人员手动做一些配置。

因此，作为前端开发人员，熟练应用 webpack 的常用配置、常用优化方案是必备的技能 —— 这也正是本文的内容。另外，webpack 的实现原理算是一个加分项，不要求所有开发人员掌握，本文也没有涉及。

基础配置

初始化环境

npm init -y 初始化 npm 环境，然后安装 webpack npm i webpack webpack-cli -D

新建 src 目录并在其中新建 index.js ，随便写点 console.log('index js') 。然后根目录创建 webpack.config.js ，内容如下

const path = require('path')

module.exports = {
  // mode 可选 development 或 production ，默认为后者
  // production 会默认压缩代码并进行其他优化（如 tree shaking）
  mode: 'development',
  entry: path.join(__dirname, 'src', 'index'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
}

网站栏目：webpack4从零学习常用配置(小结)-创新互联
标题网址：http://xjjierui.cn/article/dissjg.html

网站建设知识

webpack4从零学习常用配置(小结)-创新互联

其他资讯