webpack相关配置

最新推荐文章于 2025-09-07 14:05:23 发布

weixin_34032792

最新推荐文章于 2025-09-07 14:05:23 发布

阅读量87

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript json ViewUI

原文链接：https://juejin.im/post/5cd23bfcf265da035403236b

1. 搭建 webpack 基本环境

1.1 webpack

webpack是是一个现代 JavaScript应用程序的静态模块打包工具，可以分析你的项目依赖的模块以及一些浏览器不能直接运行的拓展语言(Scss，TypeScript等），并生成一个或多个 bundle，将其打包为合适的格式以供浏览器使用.

1.2 初始化项目

npm init -y

1.3 安装webpack

安装node

是否安装成功
node -v
npm -v
复制代码

安装nrm

//当使用官方npm源安装各种包比较慢的时候，建议下载nrm（npm源管理器）快速切换不同npm源地址。
npm install nrm -g
//查看可选的源
nrm ls
//建议切换到淘宝镜像
nrm use taobao
//添加公司私有npm源,registry是npm源名 url是源的地址
nrm add  <registry> <url> 
//删除
nrm del <registry>
复制代码

安装webpack(使用淘宝镜像安装，速度较快)

//不建议全局安装，这样每个项目可以根据需求安装不同的webpack
//webpack-cli是webpack的命令行，webpack4.0版本以上，把webpack和webpack-cli分离开了，安装了webpack-cli才能运行webpack相关的命令
cnpm install webpack webpack-cli -g
webpack -v
//本地安装并判断是否安装成功
cnpm install webpack webpack-cli -D
npx webpack -v
//也可以安装指定的版本

复制代码

1.3 webpack 打包构建项目

project

 webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js
+ |- /dist
复制代码

npm指定入口和出口文件路径（不建议）

//webpack会默认把index.js打包到./dist/main.js
npx webpack  ./src/index.js --mode development  
//指定入口文件和出口文件路径
npx webpack  ./src/index.js  -o ./dist/bundle.js  --mode development
复制代码

在项目文件下创建webpack.config.js文件，指定入口文件和出口文件的路径

var path = require('path')
module.exports = {
  mode: 'production',
  entry: './src/index.js', //入口文件
  output: {
    path: path.resolve(__dirname, './dist'), //出口文件
    //path: path.jion(_dirname, './dist')
    filename: 'bundle.js'
  }
}
复制代码

在npm运行npx webpack进行打包构建

转载于:https://juejin.im/post/5cd23bfcf265da035403236b