本笔记根据coderwhy老师，在b站讲的vue视频整理的
这里是他的bilibili视频链接：[学习地址][/video/BV15741177Eh?p=1]
讲的是真TM好，应该算上b站上讲解vue最好的视频了，注意学习的时候和老师的版本要一致，要不然可能会出现问题，希望大家认真地学习听课，争取早日成为大牛哦
介绍
前端需要模块化。
目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6。
在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。
并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。
而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用（在
后续我们会看到）。这就是webpack中模块化的概念
webpack是一个现代的JavaScript应用的静态模块打包工具
安装
安装webpack首先需要安装，自带了软件包管理工具npm
查看自己的node版本:
node -v
- 1
全局安装webpack(版本号3.6.0)
npm install -g webpack@3.6.0
- 1
在正式项目里面还要进行局部安装
npm install --save-dev webpack@3.6.0
- 1
为什么全局安装后，还需要局部安装呢？
-
在终端直接执行webpack命令，使用的全局安装的webpack
-
当在中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack
起步
现在的js文件中使用了模块化的方式进行开发，他们可以直接使用吗？
不可以。
因为如果直接在引入这两个js文件，浏览器并不识别其中的模块化代码。另外，在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理。
我们应该怎么做呢？
使用webpack工具，对多个js文件进行打包。我们知道，webpack就是一个模块化的打包工具，所以它支持我们代码中写模块化，可以对模块化的代码进行处理。
另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得非常方便了。
OK，如何打包呢？使用webpack的指令即可
webpack ./src/ ./dist/
- 1
将 ./src/所依赖的所有js文件，由webpack打包成一个./dist/文件，引入最终的js就可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="dist/"></script>
<body>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
配置介绍
我们考虑一下，如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？
当然可以，就是创建一个文件，必须叫这个名字
// webpack ./src/ ./dist/ 每次打包都要写好长
//配置完成之后就可以直接使用 webpack命令
//要使用node中的包，下载，如果目录中要使用Node就要在目录下面，npm init
const path = require('path')
module.exports={
//想要打包的js文件
entry:'./src/',
//打包完成输出地址，而且要动态获取路径，__dirname指当前所在文件路径，后面在拼接dist文件夹
output:{
path:path.resolve(__dirname,'dist'),
//输出文件的名字
filename:''
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
局部安装webpack
目前，我们使用的webpack是全局的webpack，如果我们想使用局部来打包呢？
因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打
出现问题。
所以通常一个项目，都有自己局部的webpack。
第一步，项目中需要安装自己局部的webpack
这里我们让局部安装webpack3.6.0
Vue CLI3中已经升级到webpack4，但是它将配置文件隐藏了起来，所以查看起来不是很方便
npm install webpack@3.6.0 --save-dev
- 1
第二步，通过以下命令启动本地webpack打包
./node_modules/.bin/webpack
- 1
但是，每次执行都敲这么一长串有没有觉得不方便呢？
OK，我们可以在的scripts中定义自己的执行脚本。
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// 有的时候我们的项目使用的版本和你本地全局安装的版本不一致，所以我们更倾向于使用项目中的版本
// 只要是在控制台，就会使用全局的版本
// 配置一下，他会默认寻找项目本地安装的webpack，然后再去找全局的
"build": "webpack"
},
"author": "",
"license": "ISC",
// npm install webpack@3.6.0 --save-dev
// 开发时依赖，运行项目不需要它,使用上面的命令会用保存到这
"devDependencies": {
"css-loader": "^2.0.2",
"webpack": "^3.6.0"
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。
首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找。
如何执行我们的build指令呢？
npm run build
- 1
配置loader
介绍
loader是webpack中一个非常核心的概念。
webpack用来做什么呢？
在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
对于webpack本身的能力来说，对于这些转化是不支持的。
那怎么办呢？
给webpack扩展对应的loader就可以啦。
loader使用过程：
步骤一：通过npm安装需要使用的loader
步骤二：在中的modules关键字下进行配置
大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法
打包.css
重新打包，会出现如下错误：
这个错误告诉我们：加载文件必须有对应的loader。
在webpack的官方中，我们可以找到如下关于样式的loader使用方法：
先安装,版本要正确
npm install css-loader@2.0.2 style-loader@0.23.1 --save-dev
- 1
按照官方配置文件
const path = require('path')
module.exports = {
//想要打包的js文件,这里使用node动态获取目录
entry: './src/',
//打包完成输出地址，而且要动态获取路径，必须绝对路径
output: {
path: path.resolve(__dirname, 'dist'),
filename: '',
// 在这里加个publicPath，为了让所有的url都加上这个路径
// 因为你的还没打包进dist 所以找不到打包好的图片
publicPath:'dist/'
},
module: {
rules: [
{
//正则表达式，以css结尾的
test: /\.css$/,
// 先css-loader负责解析加载css文件
// 后style-loader是将样式加载到dom
// 但是使用多个loader时，是从右向左的,顺序不能换
use: ['style-loader', 'css-loader']
}
]
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
npm run build运行成功
打包.less
继续在官方中查找，我们会找到less-loader相关的使用说明
首先，还是需要安装对应的loader
注意：我们这里还安装了less，因为webpack会使用less对less文件进行编译
npm install less-loader@4.1.0 less@3.9.0 --save-dev
- 1
其次，修改对应的配置文件,添加一个rules选项，用于处理.less文件
const path = require('path')
module.exports = {
//想要打包的js文件,这里使用node动态获取目录
entry: './src/',
//打包完成输出地址，而且要动态获取路径，必须绝对路径
output: {
path: path.resolve(__dirname, 'dist'),
filename: '',
// 在这里加个publicPath，为了让所有的url都加上这个路径
// 因为你的还没打包进dist 所以找不到打包好的图片
publicPath:'dist/'
},
module: {
rules: [
{
//正则表达式，以css结尾的
test: /\.css$/,
// 先css-loader负责解析加载css文件
// 后style-loader是将样式加载到dom
// 但是使用多个loader时，是从右向左的,顺序不能换
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
// 但是使用多个loader时，是从右向左的,顺序不能换
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}
]
},
]
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
打包图片
首先，我们在项目中加入两张图片：
一张较小的图片(小于8kb)，一张较大的图片(大于8kb)
待会儿我们会针对这两张图片进行不同的处理
我们先考虑在css样式中引用图片的情况，所以我更改了中的样式：
如果我们现在直接打包，会出现如下问题
图片处理，我们使用url-loader来处理，依然先安装url-loader
npm install url-loader@1.1.2 --save-dev
- 1
修改配置文件:
// webpack ./src/ ./dist/ 每次打包都要写好长
//配置完成之后就可以直接 webpack
//要使用node中的包，下载，如果目录中要使用Node就要在目录下面，npm init
const path = require('path')
module.exports = {
//想要打包的js文件,这里使用node动态获取目录
entry: './src/',
//打包完成输出地址，而且要动态获取路径，必须绝对路径
output: {
path: path.resolve(__dirname, 'dist'),
filename: '',
// 在这里加个publicPath，为了让所有的url都加上这个路径
// 因为你的还没打包进dist 所以找不到打包好的图片
publicPath:'dist/'
},
module: {
rules: [
{
//正则表达式，以css结尾的
test: /\.css$/,
// 先css-loader负责解析加载css文件
// 后style-loader是将样式加载到dom
// 但是使用多个loader时，是从右向左的,顺序不能换
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
// 但是使用多个loader时，是从右向左的,顺序不能换
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}
]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
//限制图片大小，单位是b
//查看图片是否小于这个值，小于就把他编译成base64字符串的格式
//大于这个值就会使用file-loader来加载，不需要配置，直接安装就可、
// 他会将图片重命名放进dist里面
options: {
limit: 8192,
//打包进文件夹配置，起名字原来的名字前八位.后缀名
name:'/img/[name].[hash:8].[ext]'
}
}
]
}
]
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
再次打包，运行，就会发现我们的背景图片选出了出来。而仔细观察，你会发现背景图是通过base64显示出来的
OK，这也是limit属性的作用，当图片小于8kb时，对图片进行base64编码
那么问题来了，如果大于8kb呢？我们将background的图片改成
这次因为大于8kb的图片，会通过file-loader进行处理，但是我们的项目中并没有file-loader
所以，我们需要安装file-loader
npm install file-loader@3.0.1 --save-dev
- 1
再次打包，就会发现dist文件夹下多了一个图片文件
我们发现webpack自动帮助我们生成一个非常长的名字，这是一个32位hash值，目的是防止名字重复
但是，真实开发中，我们可能对打包的图片名字有一定的要求
比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复
所以，我们可以在options中添加上如下选项：
-
img：文件要打包到的文件夹
-
name：获取图片原来的名字，放在该位置
-
hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
-
ext：使用图片原来的扩展名
但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确
本应该放在dist下面，我们的在根目录下面
但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个
这样会给加载到html里面的路径前加上dist/
等我们将放进dist里面就可以去掉了
将ES6转成ES5
如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，那么就意味着可能一些对ES6还不
支持的浏览器没有办法很好的运行我们的代码。
在前面我们说过，如果希望将ES6的语法转成ES5，那么就需要使用babel。而在webpack中，我们直接使用
babel对应的loader就可以了
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
- 1
配置文件:
// webpack ./src/ ./dist/ 每次打包都要写好长
//配置完成之后就可以直接 webpack
//要使用node中的包，下载，如果目录中要使用Node就要在目录下面，npm init
const path = require('path')
module.exports = {
//想要打包的js文件,这里使用node动态获取目录
entry: './src/',
//打包完成输出地址，而且要动态获取路径，必须绝对路径
output: {
path: path.resolve(__dirname, 'dist'),
filename: '',
// 在这里加个publicPath，为了让所有的url都加上这个路径
// 因为你的还没打包进dist 所以找不到打包好的图片
publicPath:'dist/'
},
module: {
rules: [
{
//正则表达式，以css结尾的
test: /\.css$/,
// 先css-loader负责解析加载css文件
// 后style-loader是将样式加载到dom
// 但是使用多个loader时，是从右向左的,顺序不能换
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
// 但是使用多个loader时，是从右向左的,顺序不能换
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}
]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
//限制图片大小，单位是b
//查看图片是否小于这个值，小于就把他编译成base64字符串的格式
//大于这个值就会使用file-loader来加载，不需要配置，直接安装就可、
// 他会将图片重命名放进dist里面
options: {
limit: 8192,
//打包进文件夹配置，起名字原来的名字前八位.后缀名
name:'/img/[name].[hash:8].[ext]'
},
}
]
},
{
test: /\.js$/,
//排除
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
重新打包，查看文件，发现其中的内容变成了ES5的语法
整合Vue
起步
后续项目中，我们会使用Vuejs进行开发，而且会以特殊的文件来组织vue的组件。
所以，下面我们来学习一下如何在我们的webpack环境中集成Vuejs
现在，我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装
注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖
npm install vue@2.5.21 --save
- 1
那么，接下来就可以按照我们之前学习的方式来使用Vue了:
先导入，再在中使用
修改完成后，重新打包，运行程序：
打包过程没有任何错误(因为只是多打包了一个vue的js文件而已)
但是运行程序，没有出现想要的效果，而且浏览器中有报错
这个错误说的是我们使用的是runtime-only版本的Vue，什么意思呢？
这里我只说解决方案：Vue不同版本构建，后续我具体讲解runtime-only和runtime-compiler的区别
所以我们修改webpack的配置，添加如下内容即可，resolve和module同级
运行成功
el和template区别：
正常运行之后，我们来考虑另外一个问题：
如果我们希望将data中的数据显示在界面中，就必须是修改
如果我们后面自定义了组件，也必须修改来使用组件
但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？
定义template属性：
在前面的Vue实例中，我们定义了el属性，用于和中的#app进行绑定，让Vue实例之后可以管理它其中的内容
我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素
如果再在里面定义一个template，就会直接替换id为app那个标签
我们可以再定义一个template属性，代码如下
重新打包，运行程序，显示一样的结果和HTML代码结构
那么，el和template模板的关系是什么呢？
在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。
这样做有什么好处呢？
这样做之后我们就不需要在以后的开发中再次操作，只需要在template中写入对应的标签即可
但是，书写template模块非常麻烦怎么办呢？
没有关系，稍后我们会将template模板中的内容进行抽离。
会分成三部分书写：template、script、style，结构变得非常清晰。
Vue组件化开发引入
在学习组件化开发的时候，我说过以后的Vue开发过程中，我们都会采用组件化开发的思想。
那么，在当前项目中，如果我也想采用组件化的形式进行开发，应该怎么做呢？
查看下面的代码：
当然，我们也可以将下面的代码抽取到一个js文件中，并且导出
但是一个组件以一个js对象的形式进行组织和使用的时候是非常不方便的
一方面编写template模块非常的麻烦
另外一方面如果有样式的话，我们写在哪里比较合适呢？
现在，我们以一种全新的方式来组织一个vue的组件
但是，这个时候这个文件可以被正确的加载吗？
必然不可以，这种特殊的文件以及特殊的格式，必须有人帮助我们处理。
谁来处理呢？vue-loader以及vue-template-compiler。
安装vue-loader和vue-template-compiler：
npm install --save-dev vue-loader@13.0.0 vue-template-compiler@2.5.21
- 1
修改的配置文件：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AFR9x9Sl-1619701097265)(D:%5CTyporaTempImages%)]
vue-loader的版本过高就得安装插件，不然报错，这里使用13.0.0
使用vue
// 使用vue
import Vue from 'vue'
import App from './vue/'
new Vue({
el:'#app',
//是不需要动的，如果说你在这里定义一个template，他会整体替代el的那部分div
template:'<App/>',
components:{
App
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
这里npm run build运行成功
你要想在导入的时候省略.vue和省略.js一样，那就得配置一下，这里配置完，只能在组件之间调用省略，
你想在里面是省略不了的。
<template>
<div>
<h2 class="title">{{message}}</h2>
<button>按钮</button>
<p >{{name}}</p>
<Cpn2/>
</div>
</template>
<script>
//可以省略
import Cpn2 from "./Cpn2";
export default {
name: "Cpn",
data(){
return{
message:"Hello!",
name:"wangningbo"
}
},
components:{
Cpn2
}
}
</script>
<style scoped>
.title{
color: aqua;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
npm install build 运行成功
配置插件
plugin是什么？
plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
loader和plugin区别
loader主要用于转换某些类型的模块，它是一个转换器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。
plugin的使用过程：
步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在中的plugins中配置插件。
下面，我们就来看看可以通过哪些插件对现有的webpack打包过程进行扩容，让我们的webpack变得更加好用
添加版权声明
我们先来使用一个最简单的插件，为打包的文件添加版权声明
该插件名字叫BannerPlugin，属于webpack自带的插件。
按照下面的方式来修改的文件：
重新打包程序：查看文件的头部，看到如下信息
根据模板生成
目前，我们的文件是存放在项目的根目录下的。我们知道，在真实发布项目时，发布的是dist文件
夹中的内容，但是dist文件夹中如果没有文件，那么打包的js等文件也就没有意义了。
所以，我们需要将文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件
HtmlWebpackPlugin插件可以为我们做这些事情：
-
自动生成一个文件(可以指定模板来生成)
-
将打包的js文件，自动通过script标签插入到body中
安装HtmlWebpackPlugin插件
npm install html-webpack-plugin@3.2.0 --save-dev
- 1
使用插件，修改文件中plugins部分的内容如下：以根目录下的为模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习使我快乐</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
这里的template表示根据什么模板来生成
另外，我们需要删除之前在output中添加的publicPath属性,否则插入的script标签中的src可能会有问题
js压缩
在项目发布之前，我们必然需要对js等文件进行压缩处理
这里，我们就对打包的js文件进行压缩
我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
- 1
修改文件，使用插件：
查看打包后的文件，是已经被压缩过了
搭建本地服务器
webpack提供了一个可选的本地开发服务器，这个本地服务器基于搭建，内部使用express框架，可
以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
不过它是一个单独的模块，在webpack中使用之前需要先安装它
npm install --save-dev webpack-dev-server@2.9.1
- 1
devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：
contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
port：端口号
inline：页面实时刷新
historyApiFallback：在SPA页面中，依赖HTML5的history模式
文件配置修改如下：
//配置一个本地服务
devServer: {
contentBase: './dist',
//实时监控
inline: true,
// port:8888
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
配置一下scripts：
"dev": "webpack-dev-server --open
- 1
npm insatll dev 启动项目
配置分离
在用脚手架的时候会有很多配置文件，开发时，生产时的，这时我们要对这个大的配置文件进行分离，删除配置文件
安装整合文件的依赖
npm install webpack-merge@4.1.5 --save-dev
- 1
这是开发和生产都会用到的配置
// webpack ./src/ ./dist/ 每次打包都要写好长
//配置完成之后就可以直接 webpack
//要使用node中的包，下载，如果目录中要使用Node就要在目录下面，npm init
const path = require('path')
const Webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
//想要打包的js文件,这里使用node动态获取目录
entry: './src/',
//打包完成输出地址，而且要动态获取路径，必须绝对路径
output: {
path: path.resolve(__dirname, '../dist'),
filename: '',
// 在这里加个publicPath，为了让所有的url都加上这个路径
// 因为你的还没打包进dist 所以找不到打包好的图片
// publicPath: 'dist/'
},
module: {
rules: [
{
//正则表达式，以css结尾的
test: /\.css$/,
// 先css-loader负责解析加载css文件
// 后style-loader是将样式加载到dom
// 但是使用多个loader时，是从右向左的,顺序不能换
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
// 但是使用多个loader时，是从右向左的,顺序不能换
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}
]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
//限制图片大小，单位是b
//查看图片是否小于这个值，小于就把他编译成base64字符串的格式
//大于这个值就会使用file-loader来加载，不需要配置，直接安装就可、
// 他会将图片重命名放进dist里面
options: {
limit: 8192,
//打包进文件夹配置，起名字原来的名字前八位.后缀名
name: 'img/[name].[hash:8].[ext]'
},
}
]
},
{
test: /\.js$/,
//排除
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
resolve: {
//可以让组件之间的导入省略后缀名，但是在里面还是不能省略.vue，报错
extensions: ['.js', '.vue', '.css'],
alias: {
'vue$': 'vue/dist/'
}
},
//配置插件
plugins: [
//给打包好的js生成一个说明
new Webpack.BannerPlugin("最终版权归wangningbo所有"),
//添加
new HtmlWebpackPlugin({
template:''
})
]
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
开发时配置,还要整合
//将里面的内容加到dev里面
const WebpackMerge = require('webpack-merge');
const baseConfig = require('./');
module.exports= WebpackMerge(baseConfig, {
//配置一个本地服务
devServer: {
contentBase: './dist',
//实时监控
inline: true,
// port:8888
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
生产时配置
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//将里面的内容加到prod里面
const WebpackMerge = require('webpack-merge');
const baseConfig = require('./');
module.exports= WebpackMerge(baseConfig,{
//配置插件
plugins: [
//压缩js
new UglifyJsPlugin()
]
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
我们可以再配置另外一个scripts：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config build/",
"dev": "webpack-dev-server --open --config build/\""
}
- 1
- 2
- 3
- 4
- 5
–config 使用某个配置文件
–open参数表示直接打开浏览器
}
开发时配置,还要整合
````javascript
//将里面的内容加到dev里面
const WebpackMerge = require('webpack-merge');
const baseConfig = require('./');
= WebpackMerge(baseConfig, {
//配置一个本地服务
devServer: {
contentBase: './dist',
//实时监控
inline: true,
// port:8888
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
生产时配置
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//将里面的内容加到prod里面
const WebpackMerge = require('webpack-merge');
const baseConfig = require('./');
module.exports= WebpackMerge(baseConfig,{
//配置插件
plugins: [
//压缩js
new UglifyJsPlugin()
]
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
我们可以再配置另外一个scripts：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config build/",
"dev": "webpack-dev-server --open --config build/\""
}
- 1
- 2
- 3
- 4
- 5
–config 使用某个配置文件
–open参数表示直接打开浏览器