webpack4.x 简单配置

之前的几个项目都是用的webpack2.x,感觉配置比较繁琐,依赖插件太多,版本差异很容易引起报错。现在新版本的webpack在配置上大大简化,使用方便,记录一下;

经过测试使用,发现webpack4.x配置代理比2.x简化了很多

1.webpacks是什么?

是模块打包机,分析目录结构,找到js模块(包括了浏览器不能直接识别的代码如,typescript、sass),打包成合适的格式,供游览器访问。

优势:模块打包,和构建项目
打包的优势:

1.模块化,拆分了业务的复杂的js代码
2.js扩展了==》基于原型==》基于class(typescript,es6)

2.webpack4.x安装

1.先全局安装 npm install webpack -g ;npm install webpack-cli -g
2.再npm init 生成package.json
3.局部安装
npm install webpack -S
npm install webpack-cli S
4.webpack –mode production(生产环境)
webpack –mode development(开发环境)
3.配置
1.webpack四个核心概念
入口(entry)
输出(output)

loader:


插件(plugins)

[默认配置
sr
index.js
dist
main.js]

2.配置文件

1.DevServer


2.在package.json

配置:

“scripts”: {


},

3.loader:加载程序

1.引入css需要


4.插件

html-webpack-plugin

src:一般是开发阶段

public:一般是生产阶段[一般这2个阶段文件要对应]


5.css提取


6.babel

7.引入第三方文件



网友评论

3条评论

发表

网友评论

3条评论

发表

最新评论

01月01日 17:29

12月31日 23:34

12月31日 23:06

推荐文章

彩龙

Copyright © 2008-2019 彩龙社区(http://www.clzg.cn) 版权所有 All Rights Reserved.

免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。

经营许可证编号:滇B2-20090009-7

下载我家昆明APP 下载彩龙社区APP