webpack相关配置

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

webpack相关配置相关推荐

【利用AI让知识体系化】Webpack 相关配置技巧
文章目录章节一:了解 Webpack Webpack 是什么? 为什么使用 Webpack? Webpack 的基本概念 Webpack 的核心概念和实现原理章节二:安装和配置 Webpack 安 ...
vue-cli3以后，关于webpack打包等的相关配置
vue-cli3以后,关于webpack打包等的相关配置最近刚入职一家新的公司,接手了一个新的项目!做一个人脸系统相关的后台管理系统!领导让我选择自己拿手的技术框架,我毫不犹豫的选择了 vue-cl ...
react之webpack常用配置
create-creact-app项目,如果需要手动修改配置,需先npm run eject弹出配置,这个过程是不可逆的. 如何在不通过npm run eject进行webpack配置了? 1.用cr ...
vue.config.js配置，webpack打包配置详解
注意: vue-cli3 脚手架搭建完成后,项目目录中没有 vue.config.js 文件,需要手动创建第一步:手动创建vue.config.js文件, 一般放在和package.json同级目录 ...
建立项目的webpack简单配置
实战项目中的 Webpack 配置: 说明:以下命令通过 Git Bash 执行 1.建立webpack-demo文件夹及npm初始化 Administrator@PC-20170414ZFJO MI ...
devserver配置_03-零基础学webpack4.0之html相关配置
webpack中html相关配置如何让我们的文件优雅运行很多时候我们不希望直接本地打开文件进行访问,而是通过localhost进行访问.这时候就需要我们配置一下就可以实现. 开启我们的server ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
vue webpack打包入口文件是哪个_Vue 学习笔记（二十五）：webpack 相关
Webpack 是什么 Vue CLI Webpack 相关 Webpack 更多参考官方文档 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定 ...
Webpack 5 配置手册（从0开始）
webpack安装顺序 1. `npm init -y`,初始化包管理文件 package.json 2. 新建src源代码目录 3. 新建index.html 4. `yarn add webpac ...