关于vue.js:Webpack的基本使用

35次阅读

共计 786 个字符,预计需要花费 2 分钟才能阅读完成。

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

正文完
 0