webpack4环境搭建-初始化项目

简介: webpack4环境搭建-初始化项目

1、创建一个目录然后进入,初始化package.json

cnpm init -y //-y的意思是yes的意思,在init的时候省去了敲回车的步骤,生成的默认的package.json

2、安装webpack4,webpack-cli

cnpm i webpack webpack-cli --save-dev

3、然后打开package.json添加构建脚本

"scripts": {
    "build": "webpack"
  }

执行脚本:cnpm run build 打包后会报错,提示如下:


image.png

error.png

这个提示信息,有2个地方需要注意,一个是警告信息,一个报错信息,我们先看报错信息。

为啥会报错呢?简单说就是webpack 4 需要在./src目录下找一个入口文件!webpack4默认的入口文件是./src目录下的index.js文件,这里没有,所以就报错了。

那我们在src目录下创建index.js文件,然后里面添加一行代码:

console.log("111111111111111111111")

再次执行cnpm run build 打包,执行成功,生成的dist目录下有一个mian.js文件,我们打开这个main.js文件,

如下:

image.png

main.png


从上面的图上可以看出来,我们添加的代码被打包成功,但是请注意,打包的代码是一行,也就是打包后被压缩了。这里也就引出了webpack4的开发模式和生产模式。

联想一下,上面第一次打包报错里面的信息,里面有个警告就是告诉我们在打包时候没有指名打包模式,如果不指明默认打包模式是生产模式。

打开package.json修改构建脚本

"scripts": {
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production"
  },

我们执行npm run dev 和 npm run build,我们发现不会再此报警告信息了,对比下打包出来的文件,我们发现执行npm run dev 打包出来的文件有个明显的特点是没被压缩,npm run build打包出来的文件被处理了。

生产模式、开启了一系列额外的优化。包括minification, scope hoisting, tree-shaking等(后续会介绍)

开发模式、为速度做了优化,除了提供一个没有压缩的包以外没有做额外的事。

到此一个简单的webpack4配置环境就出来了。


相关文章
|
5月前
|
前端开发
webpack如何设置devServer启动项目为https协议
webpack如何设置devServer启动项目为https协议
1021 0
|
5月前
|
缓存 前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(三)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
2月前
webpack——通过webpack-bundle-analyzer分析项目包占比情况
webpack——通过webpack-bundle-analyzer分析项目包占比情况
29 2
webpack——通过webpack-bundle-analyzer分析项目包占比情况
|
2月前
|
缓存 JSON JavaScript
简单介绍下从零搭建 Webpack 项目
本文详细介绍了Webpack中Loader的概念及其重要性。Webpack仅支持处理JS和JSON文件,而Loader能够帮助处理其他类型的文件,如CSS、图片等,并将其转换为有效的模块。文章首先解释了Loader的基本原理,接着介绍了几种常见Loader的配置和使用方法
19 1
|
2月前
|
前端开发 JavaScript API
|
2月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
39 0
|
2月前
|
JavaScript 测试技术
在不同 webpack 版本的 Vue 项目中配置 Storybook
在不同 webpack 版本的 Vue 项目中配置 Storybook
|
3月前
|
JavaScript Windows
安装node.js与webpack创建vue2项目
安装node.js与webpack创建vue2项目
26 1
|
4月前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
56 3
|
5月前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。Webpack的插件机制可扩展功能,支持热更新以加速开发流程。
48 2