webpack4.x打包过程详解

一、全局安装 webpack-cli 脚手架

npm install webpack-cli -g

二、新建一个项目wp,并在wp目录下初始化一个package.json文件。

npm init -y

在wp目录下新建一个src目录,并在该目录下新建一个index.js 作为入口文件

webpack4.x 给我们提供了两种打包模式:

development 为开发模式
production 为生产模式,打包出的 main.js 代码自动压缩

我们可以直接使用命令 webpack --mode development 进行开发模式打包

我们使用生产模式webpack --mode production 打包

此时代码已经被压缩。

不管哪种模式,我们每次打包都使用 webpack --mode development 或者 webpack --mode production 都有点麻烦,我们可以修改下package.json文件里面的 scripts 属性:

"dev": "webpack --mode development",
"build: "webpack --mode production"

最后我们就可以使用 npm run dev 进行开发模式打包,使用 npm run build 进行生产模式打包。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 如何用webpack4带你实现一个vue的打包的项目

    一个用webpack4打包的vue 的项目,参照vue-cli的webpack配置, 一步一步带你实现一个vue的打包的项目,每一个commit对应一个步骤. github 地址 clone project git clone git@github.com:naihe138/nvue.git install npm install or yarn 一.初始化项目 初始化项目,用vue-loader来打包.vue文件,html-webpack-plugin插件来导出html文件. 第一步我们很简单

  • webpack4 css打包压缩问题的解决

    这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, // webpack.config.js module.exports = { // webpack会根据mode进行对Js打包,development压缩,production下面自动压缩,亲测没有问题 mode: 'development' // productio

  • webpack4.0打包优化策略整理小结

    本文介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资料 当前依赖包的版本 1.优化loader配置 1.1 缩小文件匹配范围(include/exclude) 通过排除node_modules下的文件 从而缩小了loader加载搜索范围 高概率命中文件 module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, // 排除不处理的目录

  • webpack4.x打包过程详解

    一.全局安装 webpack-cli 脚手架 npm install webpack-cli -g 二.新建一个项目wp,并在wp目录下初始化一个package.json文件. npm init -y 在wp目录下新建一个src目录,并在该目录下新建一个index.js 作为入口文件 webpack4.x 给我们提供了两种打包模式: development 为开发模式 production 为生产模式,打包出的 main.js 代码自动压缩 我们可以直接使用命令 webpack --mode d

  • Python基于pip实现离线打包过程详解

    新公司是内网环境,无法使用pip安装第三方资源库,在网上搜下,可以直接使用pip打包本机所安装的第三方资源库,打包成whl文件 一 进入cmd命令行 1 打包单个模块 pip download pytest -d /tmp 2 打包本机所有的包 pip freeze >requirements.txt pip download -r requirements.txt -d /tmp 或者 pip install --download /tmp/packages -r requirements.t

  • PyQt5 关于Qt Designer的初步应用和打包过程详解

    目录 Qt Designer的介绍 1. 缘由 2. 搭建 2.1. 安装 2.2. 打开 2.3. 设计 2.4. 转换 3. 效果 3.1. 引用 3.2. 启动 3.3. 打包 3.4. 触发 Qt Designer的介绍 在PyQt中编写UI界面可以直接通过代码来实现,也可以通过Qt Designer来完成.Qt Designer的设计符合MVC的架构,其实现了视图和逻辑的分离,从而实现了开发的便捷.Qt Designer中的操作方式十分灵活,其通过拖拽的方式放置控件可以随时查看控件效果

  • python元组打包和解包过程详解

    1.在将多个以逗号分隔的值赋给一个变量时,多个值被打包成一个元组类型.当我们将一个元组赋给多个变量时,它将解包成多个值,然后分别将其赋给相应的变量. # 打包 a = 1, 10, 100 print(type(a), a) # <class 'tuple'> (1, 10, 100) # 解包 i, j, k = a print(i, j, k) # 1 10 100 2.解包时,如果解包出来的元素数目与变量数目不匹配,就会引发ValueError异常.错误信息为:too many valu

  • Taro打包Android apk过程详解

    首先,我们使用使用命令创建模板项目,创建的命令如下. taro init myApp 然后,使用 yarn 或者 npm install安装依赖包,并使用下面的命令编译Taro项目. yarn dev:rn 启动后会开启一个监听的进程. 不过,细心的你可能会发现,使用taro init命令初始化的项目是没有原生模块支持的,原来Taro使用了一个壳子工程,首先使用下面的命令下载壳子工程taro-native-shell,如下所示. git clone git@github.com:NervJS/t

  • vue3使用Vite打包组件库从0搭建过程详解

    目录 手动搭建一个用于测试组件库组件 Vue3 项目 初始化 ts 搭建一个基于 vite 的 vue3 项目 安装插件 配置 vite.config.ts 新建入口 html 文件 app.vue 入口 main.ts 配置脚本启动项目 手动搭建一个用于测试组件库组件 Vue3 项目 本篇文章将在项目中引入 typescript,以及手动搭建一个用于测试组件库组件 Vue3 项目 因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript.vue3,同时

  • 基于vue cli重构多页面脚手架过程详解

    官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

  • React全家桶环境搭建过程详解

    本文介绍了React全家桶环境搭建过程详解,分享给大家,具体如下: 环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-dom npm i -D typescript awesome-typescript-loader source-map-loader 新建tsconfig.json { "compilerOptions": { "outDir"

  • webpack安装配置与常见使用过程详解(结合vue)

    webpack介绍和安装 webpack:前端模块化打包工具 安装webpack需要安装Node.js,Node.js自带软件包管理工具npm 查看自己的node版本: node -v 全局安装webpack cnpm install webpack -g 查看webpack版本 webpack --version 局部安装webpack cnpm install webpack --save-dev 为什么全局安装之后还需要局部安装? 在终端直接执行webpack,使用的是全局webpack

  • 使用Webpack 搭建 Vue3 开发环境过程详解

    从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 package.json 文件 Webpack 的配置文件 project project-name + |- index.html |- package.json + |- webpack.config.js + |- /src + |- index.js webpack.config.js '

随机推荐