七天学完Vue之第五天学习笔记（模块化以及webpack的使用）

第五天 （模块化以及webpack的使用）

1.8.1. 模块化
模块化规范：CommonJS, AMD, CMD, ES6的Modules

核心: 导入导出
• CommonJs的导入导出
导出：

	module.exports = {
			flag: true,
			test(a,b) {
				return a+b
			}
}

导入:

//解构赋值 let {test, flag} = require(‘导出文件路径’)

• ES6的模块化
1.

在<script>标签加上属性  type="module"可使js模块化

2.导入导出

导出：
export {flag,sum}

导入：
import {flag, sum} from "导出文件路径"

3.某些情况下，一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名这个时候就可以使用 export default 导出名 （只允许有一个）

导入时使用

impot 自定义名 from “导出的文件路径”

1.8.2. webpack

webpack是前端的一个项目工具， 它是基于 Node.js 开发出来的一个前端工具 • 准备工作 dist文件夹:
用于存放以后打包的文件 src文件夹：用于存放我们写的源文件

package.json：通过npm init生成

• 安装方式
• 全局安装

npm i webpack -g

指定版本安装：

npm install webpack@3.6.0 -g

• 安装到项目根目录
在指定的文件目录下安装

npm install webpack@3.6.0 --save-dev

–save-dev : 是开发依赖，项目打包后不需要继续使用

• 使用
• 在终端下载包出现无法加载问题
问题 ：

npm : 无法加载文件 D:\Program
Files\nodejs\node_global\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:
/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

解决方案：

（1）以管理员身份运行vs code

（2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）

（3）在终端执行：set-ExecutionPolicy RemoteSigned

（4）在终端执行：get-ExecutionPolicy，显示RemoteSigned

• 配置文件
在终端中使用 webpack优先使用 全局的

• webpack.config.js配置
1.mode ：（none,development,production） none:他将模块打包至数组之中，调用模块的时候，就是直接调用模块在此数组中的一个序号。然后没有压缩混淆之类的优化，连注释都帮我们标的好好的

development:是告诉程序，我现在是开发状态，也就是打包出来的内容要对开发友好

production:带插件（个人理解）

2.entry ： 入口

3.output ： 出口

const path = require('path')

module.exports = {
	mode: 'development',
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, 'dist'),   //动态获取路径 //__dirname是node中上下文的全局变量
		filename: 'bundle.js'
	}
}

•

package.json配置

1. 使用 npm install webpack@3.6.0 --save-dev安装本地webpack时

2. 在package.json中多一个 “dependencies”: { “webpack”: “^3.6.0” }

3.在package.json的scripts中加入"build"时运行 npm run build优先使用本地webpack

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
 },

• loaders • 实现css的模块化

1. 需要的 loader： "css-loader"与“style-loader”使用 npm install --save-dev css-loader进行下载

2. 在 webpack.config.js中进行配置, 这里注意两点: a: 我在测试中假如指定mode属性，则不可使用 npm run build进行，只需使用webpack，而去掉mode则只可用npm run build进行 b:
   规则中use列表，使用多个loader时，从右向左开始使用（注意放置的位置，style在css左面）

module:{
		rules:[
			{
				test: /\.css$/,
				use: [
					
					'css-loader',
					'style-loader'
				]
			}
		]
	}

使用 npm run build进行配置就行
• 实现加载图片

1. 下载url-loader与file-loader

2. 测试的时候在webpack.config.js的output加入 publicPath: ‘…/dist/’（实际开发的时候不需要，因为此时index还没到dist文件）

3. 在module中加入对象；

limit:值 :当图片大于此值会在dist生成文件，小于此值直接使用base64字符串编译图片

注意 options属性中设置的name为打包后图片的名字

{
	 test: /\.(png|jpg|gif)$/,
		  use: [
				{
					loader: 'url-loader',
					options: {
					limit: 13000,
						name: 'img/[name]-[hash:8].ext'
					}
				}
		]
	}

• 打包vue

1.在项目中安装

npm install vue --save

2.在webpack.config.js文件中加入

resolve: { alias: { ‘vue$’: ‘vue/dist/vue.esm.js’ } }

3.在接口js里引入vue

• el与template同时出现 template会替换 el所代表的区域。 在 template中写 页面的东西

例子：
import Vue from 'vue'

var vm = new Vue({
	el:'#app',
	template:`
	<div>
		<p>哈哈哈哈哈哈</p>
		<button @click="add">按钮</button>
		<h2>我是h2</h2>
	</div>
	`,
	data: {
		msg : 'hahahahah'
	},
	methods:{
		add() {
			console.log("我是方法");
		}
	}
});

• vue终极使用方案

1.安装 loader

npm install vue-loader vue-template-compiler --save-dev

2.创建.vue文件

在写标签 在

注意：<script>标签里需要
export default {
		name:'Jzq',
'''
}
在引入子组件的时候，也要在<script>加上import Jzq from './Jzq'

3.在webpack.config.js写配置

在module的rules规则里写
{
		test: /\.vue$/,
		use: ['vue-loader']
}
省略后缀在resolve的extensions写后缀

resolve:{
		alias: {
			'vue$': 'vue/dist/vue.esm.js'
		},
		extensions:['.vue','.css','.js']
	}

4.可能会遇到版本问题，在14及以上的版本需要…

在package.json的 “vue-loader”: “^13.0.0”,修改为13以下的再使用npm install更新一下

5.在入口文件 main.js导入使用

import Vue from 'vue'
// import App from './vue/app'
import App from './vue/App'
 
new Vue({
	el:'#app',
	template: '<App/>',
	components:{
		App
	}
});

• plugin
• 添加版权的Plugin
1.

在 wenpack.config.js配置文件中 引入const webpack = require(‘webpack’)

添加 Plugins : [
new webpack.BannerPlugin(‘最终版权归seven所有’) ] • webpack-HtmlWebpackPlugin的使用 注意 对于 webpack3的 安装 HtmlWebPack3的

1.安装 HtmlWebpackPlugin插件

npm install html-webpack-plugin --sace-dev

2.使用插件修改 webpack.config.js的配置

(1)在开头引入 const HtmlwebpackPlugin =
require(‘html-webpack-plugin’)

（2）在Plugins:[ new HtmlwebpackPlugin({
template: ‘index.html的路径’ }) ]

• js压缩的Plugin

1.安装 注意版本号 指定1.1.1 和CLI2保持一致 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

在webpack,config.js中 引入const UglifyjsWebpackPlugiin =
require(‘uglifyjs-webpack-plugin’) 在 webpack,config.js的 Plugins中使用new
UglifyjsWebpackPlugiin()

• 搭建本地服务器
1.安装 本地服务器 （本地服务器基于node.js开发,内部使用express框架，实现服务器自动刷新,把在内存内操作）等全部完事 手动部署一下

npm install --save-dev webpack-dev-server@2.9.1

2.（只在开发时需要）在 webpack.config.js中 加入

devServer:{ contentBase:’./dist’, inline: true }

属性介绍

contentBaseK ：为哪一个文件夹提供本地服务的，默认是根文件夹 port： 端口号 inline：页面实时刷新
historyApiFallback: 在SPA页面中，依赖HTML5的history

3.在 package.json的“scripts”中加入"dev": “webpack-dev-server --open”

这里的open表示自启动浏览器 Ctrl+C ： 退出终端

• 配置文件的分离

1.安装 npm install webpack-merge --sace-dev

2.把wenpack.config.js 分离到 prod.config.js存运行 dev.config.js存开发 base/config.js存公共

3.无论是prod.config.js还是dev.config.js 都需要（引入公共配置）

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config.js')

module.exports = webpackMerge(baseConfig, {
	plugins: [
		new UglifyjsWebpackPlugin()	
	]
})

谢谢观看~