Webpack的基本使用

时间:2020-7-29 作者:admin
Webpack的基本使用 

参考地址:
http://webpack.html.cn/concepts
https://www.webpackjs.com/concepts

**webpack.config.js(2.0) / vue.config.js(3.0)**

1、配置入口和出口
entry: "./app/entry", // string | object | array 
// 这里应用程序开始执行
// webpack 开始打包

output: {
// webpack 如何输出结果的相关选项

path: path.resolve(__dirname, "dist"), // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)

filename: "bundle.js", // string
publicPath: "/assets/", // string
// 输出解析文件的目录,url 相对于 HTML 页面

library: "MyLibrary", // string,
// 导出库(exported library)的名称

libraryTarget: "umd", // 通用模块定义    // 导出库(exported library)的类型 
}

Webpack的基本使用

2、配置自动打包

Webpack的基本使用

3、配置预览页面

Webpack的基本使用


Webpack的基本使用

4、配置自动打开页面

Webpack的基本使用

5、加载器loader
loader支持链式传递。将按照相反的顺序执行,loader 链中的第一个loader返回值给下一个loader。在最后一个loader,返回  webpack所预期的JavaScript

Webpack的基本使用

6、加载器打包过程

Webpack的基本使用

7、css loader

Webpack的基本使用


Webpack的基本使用

8、less loader

Webpack的基本使用


Webpack的基本使用

9、cass loader

Webpack的基本使用


Webpack的基本使用

10、css兼容前缀

Webpack的基本使用


Webpack的基本使用

11、打包图片和字体

Webpack的基本使用


Webpack的基本使用

12、js高级语法

Webpack的基本使用


Webpack的基本使用

Webpack的基本使用

13、vue组件加载器

Webpack的基本使用


Webpack的基本使用

Webpack的基本使用

14、webpack中使用vue

Webpack的基本使用

15、webpack打包发布

Webpack的基本使用

16、vue cli3.0

Webpack的基本使用


Webpack的基本使用

Webpack的基本使用

17、vue cli3.0图形界面使用elementUI

Webpack的基本使用

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。