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从零学习常用配置(小结)-创新互联
URL链接:http://scyanting.com/article/dissjg.html