Webpack的基本使用

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)的类型 
}

2、配置自动打包

3、配置预览页面

4、配置自动打开页面

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

6、加载器打包过程

7、css loader

8、less loader

9、cass loader

10、css兼容前缀

11、打包图片和字体

12、js高级语法

13、vue组件加载器

14、webpack中使用vue

15、webpack打包发布

16、vue cli3.0

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