Vue学习之webpack使用

什么是webpack

1. webpack是一个现代的JavaScript应用的静态模块打包工具；
2. webpack的重点在于：模块和打包。
   打包所有的脚本、图片、js、css等。

前端模块化

1. 方案：AMD、CMD、CommonJS、ES6；
2. ES6之前，模块化开发必须借助于其他的工具，开发完成后需要处理模块间的依赖，并且进行整合打包；
3. webpack的核心是进行模块化开发，并且处理模块间的依赖关系；
4. js、css、图片 、json文件等在webpack中均可当作模块使用。

webpack和grunt/gulp区别

1. grunt/gulp更加强调的是前端流程的自动化，核心不是模块化；
2. webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是附带功能。

webpack的安装

1. 依赖node环境，需先安装Node.js，且Node版本高于8.9；
2. npm/cnpm（node packages manager）安装，cnpm insall webpack@3.6.0 -g（即：安装3.6.0版本的webpack到本地；cnpm是淘宝镜像）。

webpack的使用

1. 编写模块化js文件；
2. 使用webpack打包；
   • 方式1：webpack ./src/main.js ./dist/bundle.js（用webpack将main.js打包成bundle.js）；
   • 方式2：编写webpack.config.js文件,（使用webpack命令打包）；
   • 方法3：在创建好的package.json文件中scripts脚本中添加命令脚本映射（该方式首先使用本地node_modules/bin路径中寻找命令，如果没有找到则从全局变量中寻找）。
3. 页面引用打包好的文件。

//webpack.config.js 
const path = require('path'); 
	module.exports = { 
		entry：'./src/main.js'，   
		output：{   
			//动态获取路径时若项目中无package.json文件
			//需要使用 cnpm init命令创建package.json文件
			path：path.resolve(_dirname, 'dist'), 
			filename：'bundle.js' 
	} 
}

loader

1. 项目开发中不仅仅有基本的js代码处理，还需要加载css、图片，或者将高级的ES6转成ES5代码，将TypeScript转长ES5，将scss、less转成css，将.jsx、.Vue文件转成js文件等，webpack本身不支持这些转化，使用loader解决此类问题；
2. 使用过程：
   • 使用cnpm/npm安装loader；
   • 在webpack.config.js中的modules关键字下进行配置。
3. loader的用法请参考链接: webpack中文文档。
4. 用loader打包项目中css文件：
   • 局部安装css-loader和style-loade

//使用命令安装
//安装  css-loader
cnpm install --save-dev css-loader
//安装  style-loader
cnpm install --save-dev style-loader

//配置文件配置
//webpack.comfig.js 
module.expors = { 
	module: {     
		rules: [ {         
			test: /\.css$/,        
 			//css-loader只负责将css文件加载，解析css文件，并且返回css代码           
 			//style-loader将模块的导出作为样式添加到DOM中           
 			//使用读个loader时，从右向左顺序         
			use:['style-loader','css-loader']       
 		}] 
 	} 
 }

- 使用css-loader

//页面引用css文件
import css from 'file.css'