欢迎光临
我们一直在努力

webpack 核心概念与基础配置

文章目录

webpack核心概念

  • entry: webpack开始构建的入口文件
  • output: 设置输出文件名称及输出文件目录
  • loaders: 把非JS文件解析成webpack能够处理的文件
  • plugins: 常用于优化,提取精华,压缩处理等,对webpack功能进行拓展
  • chunk:

webpack概念

webpack本质上就是一个模块打包工具,最早的时候webpack只能打包JS资源,随着webpack的发展,现在可以对任何形式的模块进行打包。

初始化项目

npm init

当调用npm init方法后会生成一个package.json文件,该文件属性如下:

  • name -包名
  • version -包的版本号
  • description -包的描述
  • homepage -包的官网URL
  • author -包的作者
  • contributors -包的其他贡献者
  • dependencies -生产环境依赖包列表
  • devDependencies -开发环境依赖包列表
  • main -main字段制定了程序的主入口文件 require('moduleName')就会加载这个文件,main的默认值是模块根目录下的 index.js
  • keywords -关键字

webpack安装

全局安装:npm install webpack webpack-cli -g
局部安装:npm install webpack webpack-cli -D

注意:不要使用全局安装!否则我们将无法再电脑里运行两个不同webpack版本的项目。
当想要查看webpack版本号是,可以在项目目录:

npx webpack -v

webpack配置文件

默认情况下,高版本webpack会使用默认配置,但我们可以在项目根目录创建webpack.config.js自定义配置文件。在配置文件内,要先引入node.js的一个核心模块path:

const path = require('path')
moudle.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path:path.join(__dirname,'dist')
    }
}

写好配置文件后,我们就可以运行webpack了,下面是三种webpack的打包方式:

global:webpack index.js
local:npx webpack index.js
scripts:npm run dev

注意:如果我们创建webpack时没有安装webpack-cli就无法运行上面的命令。webpack-cli的作用是让我们可以在命令行运行webpack命令并且生效。

npm scripts

在vue/react中,我们常用npm run dev这样的形式,因此我们可以在package.json中配置scripts命令:

"scripts":{
    "dev":"webpack --config webpack.config.js"
}

webpack配置环境

webpack的默认配置环境为production,会默认对打包后的文件进行压缩,如果不想文件被压缩,可以修改mode为development:

const path = require('path');
module.exports = {
    mode: development,
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'bundle')
    }
}

entry与output

当需要多个入口文件和出口文件时,可以通过配置entry和output实现。

entry: {
    index :'./src/index.js',
    bundle : './src/create.js',
},
output: {
    filename: '[name].js',
    publicPath: "https://cdn.example.com/assets/",
    path: path.join(__dirname, 'dist')
} 
  • entry这样子配置就可以接受多个打包的文件入口
  • output输出文件的filename需要使用占位符name
  • 生成的名字与entry名称相对应
  • 如果后台已经将资源挂载到了cdn上,那么需要配置publicPath
赞(0) 打赏
未经允许不得转载:散人研 » webpack 核心概念与基础配置
分享到: 更多 (0)

如果文章有不解或描述错误的地方,欢迎在评论区提问或指正!

评论 抢沙发

7 + 3 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏