学习来源： [coderwhy]: www.bilibili.com/video/BV157…

WebPack的学习笔记

好处

可以让我们专注于模块化的编程
处理各个模块之间的依赖关系
可以使用不同的模块化规范，webpack都会自动进行识别

文件和文件夹的设置

dist文件夹：用于存放打包的文件
src文件夹：用于存放我们写的源文件
- main.js项目的入口文件
- mathUtils.js定义了一些数学工具函数
index.html：首页
package.json：通过npm init生成的，npm包管理的文件

打包调式方法

webpack的直接调用

webpack ./src/main.js ./dist/bundle.js(告诉webpack将main.js打包到bundle.js里)
然后在html页面引用bundle.js
若main.js有依赖其他的包文件，则webpack会自动帮你处理模块之间的依赖我们只需要找到main这个入口文件

通过配置文件

1. nom init 初始化生成package.json (包含当前项目的一些信息)
1. npm install(如果依赖node相关的东西)

配置webpack.config.js

const path = require('path')
// 依赖于path这个包 需要安装
// 获取到全局的path模块
module.exports = {
	entry:'./src/main.js', //入口
	output:{
		// 此处要绝对路径 通过动态获取
		// 对两个路径进行拼接
		//__dirname node自带 保存当前文件所在的路劲
		path: path.resolve(__dirname, 'dist'),      
		filename:'bundle.js'
	},  //出口
}

与npm run进行映射

这种执行方式会优先在本地寻找webpack，如果没有局部webpack才选用全局webpack(用全局容易出错误)

在package.json中配置scripts文件添加想要的映射

scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"build":"webpack"
},

运行npm run build 相当于 webpack
当你在终端内执行webpack命令用的都是全局webpack，而利用脚本映射则会优先使用局部webpack

在本地安装webpack

命令：npm install webpack@3.6.0 --save-dev

安装好后package.json中就多出

// 开发时依赖于webpack3.6.0
"devDependencies": {
    "webpack": "^3.6.0"
},
// 运行时依赖
"dependencies":{

}

总结

第一步创建webpack.config.js 写好导入导出
第二步 npm init 生成package.json文件
第三步在package.json中添加映射
第四步导入本地包 npm install webpack@版本 --save-dev

loader

webpack只能处理基本的js代码处理，不能处理像css，图片，es6->es5,typescript->es5等等，这时候就需要扩展对应的loader，不同的文件处理需要不同的loader

css配置过程

通过npm安装需要使用的loader
在webpack.config.js中的module关键字下进行配置
css-loader只负责加载 style-loader负责渲染两个都需要安装

而webpack在读取loader多个数据时是从右往左读取的

use: [ 'style-loader', 'css-loader' ]

less/scss/stylus配置

图片的配置

配置

小于limit值的会将图片编译成base64字符串形式

大于limit值的需要使用file-loader模块再次进行加载

如果图片依旧显示不出来则可能时路径出错

//当项目中有引用路劲时都会在前面拼接publicPath
publicPath: 'dist/'

图片文件处理-修改文件名称

打包后的文件是一串hash文字不利于识别，我们需要配置进行规范

格式设置为：img/name.hash:8.ext
在url-loader中进行配置

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

而name:'img/[name].[hash:8].[ext]'

表示打包后的文件的格式，即

当前根目录下（因为之前设置了publicPath，所以当前根目录为dist/）创建一个img文件夹，然后打包文件（【原来的名称】+【8位hash值】(防止重复)+【后缀名】，如

es6的转换（bable）

很多浏览器并不能识别es6的语法

npm install babel-loader babel-core babel-preset-env

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

env（environment）表示环境，

Vue loader

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

{
    test:/\.vue$/,
    use : ['vue-loader']
}

出现错误

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

缺少一个插件，在vue-loader14.*后的版本都需要安装插件
所以在package.json中手动修改vue-loader的版本
"vue-loader": "^13.0.0", ^这个符号会自动安装大于等于13.0.0的版本但不会超过14.版本
修改了package文件需要重新npm install

配置Vue

安装vue的三种方式

直接下载应用
cdn引入
npm安装

npm install vue --save（不需要-dev，开发运行时都需要）

import Vue from 'vue'

const app = new Vue({
	el:'#app',
	data:{
		message:"hello vue"
	}
})

vue在构造的时候有两个版本

runtime-only 代码中不可以有任何的template
runtime-compiler 代码中可以template，因为compiler可以编译template

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解决方法

通过配置webpack.config.js指定使用第二种版本

resolve:{
    // alias 别名
    alias:{
    'vue$':'vue/dist/vue.esm.js'//指定vue的路径
    }
}

他会在你import vue的时候找到该路径下的编译版本

创建Vue时template和el的关系

SPA（simple page web appliaction）单页面复应用

多个页面是通过路由跳转（vue-router前端路由)

当vue实例中同时有el和template时，vue会自动将template的模板替换掉el挂载的模块

Vue的终极用法

// import App from "./vue/app"   导入模块
import App from "./vue/App.vue"  //导入vue
const app = new Vue({
	el:'#app',
	template:'<App/>',   
	components:{
		App
	}
})

//将组件模块化
export default  {
	template:`
		<div>
		 <h2>{{message}}</h2>
		 <button @click="btnClick">按钮</button>
		 <h2>{{name}}</h2>
		</div>
	`,
	data(){
		return{
			message : '啦啦啦',
			name:"你好"
		}
	},
	methods:{
	}
}

再次抽离

<template>
	<div class="title">
	 <h2>{{message}}</h2>
	 <button @click="btnClick">按钮</button>
	 <h2>{{name}}</h2>
	</div>
</template>

<script>
	export default {
		name:"App",
		data(){
			return{
				message : '啦啦啦',
				name:"你好"
			}
		},
		methods:{
		}
	}
</script>

<style>
	.title {
		color: red;
	}
</style>

根据el和template同时存在时，template会替换el挂载的模块，讲template抽离成一个组件
然后将组件模块化，通过导出导入完成抽离
再对模板进行进一步抽离，拆分成template，script，style（在vue文件）
.vue文件就是一个组件
而多了vue文件,那么webpack也需要新增对应的loader

plugin

plugin是插件的意思，通常用于对某个现有的架构进行扩展

与loader的区别

loader是模块的转换器，plugin是扩展器

版权声明

在webpack.config.js中添加配置

const webpack = require('webpack')

module.exports = {
	plugins:[
		new webpack.BannerPlugin("最终版权归王琼弟所有")
	]
}

打包html

发布项目时，发布的是dist文件夹的内容，但是dist文件夹中没有html文件。

自动生成一个html文件（可以指定模板）
将打包的js文件，自动通过script标签插入到body中

下载：

npm install html-webpack-plugin --save-dev

引入：

const HtmlWebpackPlugin = require("html-webpack-plugin")

配置：

new HtmlWebpackPlugin({
	template:'index.html'
})

运行：

压缩js

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

const UglifyJsPlugin = require("uglifyjs-webpack-plugin")

new UglifyJsPlugin()

搭建本地服务器

基于node.js搭建，内部使用express框架，实时监听代码变化，将编译的部分放进内存里面进行测试（内存的读取速度远快于磁盘），当真正需要发布时才放进硬盘（执行npm run build后）。

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

devServer:{
    //服务于哪个文件夹
    contentBase: './dist',
    //是否实时监听
    inline:true
}

不能直接执行webpack-dev-server,因为命令行中执行是直接在全局搜索该命令，而当前命令是安装在本地，所以需要配置

"dev":"webpack-dev-server --open" //open执行后页面自动打开

当执行npm run dev时到本地node_modules里面去找

配置文件的分离

有些插件和服务只在开发或者只在发布时才用到，分开发时依赖和打包时依赖，所以要进行抽离

base.config.js中存放公共的js
dev.config.js存放开发时所需js
prod.config.js存放生产时所需js

拆分后要合并

npm install webpack-merge --save-dev

const webmerge = require("webpack-merge")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const baseConfig = require("./base.config.js")
module.exports = webmerge(baseConfig,{
	plugins:[
		 new UglifyJsPlugin()
	]
})

利用webpack-merge整合baseconfig和prodconfig一起导出，dev同理

将一个webpackconfig转换为三个独立的部分

然后修改package的配置手动配置路径添加 --config 路径

"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"

然后修改出口路径的拼接

path: path.resolve(__dirname, '../dist')

WebPack学习笔记