组件的插槽：
有点类似于Java的接口。
组件的插槽是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。
基本使用(单插槽)
基本使用:<div id="app">
<cpn>cpn>
<cpn>
<div>div元素div>
<p>p元素p>
cpn>
<cpn><i>额额额i>cpn>
div>
<template id="cpn">
<div>
<h2>我是组件h2>
<p>是组件p>
<slot><button>按钮button>slot>
div>
template>
<script src="./vue/vue.js">script>
<script>
const cpn = {
template: "#cpn"
}
const app = new Vue({
el:"#app",
components:{
cpn
}
})
script>
在子组件中定义插槽时，可以为插槽指定一个name属性。
使用组件时，可以用 + v-slot:名称，指定替换掉哪个slot里的内容。
注意：v-slot只能添加在 标签上
<div id="app">
<cpn>
<template v-slot:center>
<span>标题span>
template>
cpn>
<cpn>
<template v-slot:right>
<span>标题span>
template>
cpn>
div>
<template id="cpn">
<div>
<slot name="left"><span>左边span>slot>
<slot name="center"><span>中间span>slot>
<slot name="right"><span>右边span>slot>
div>
template>
<script src="./vue/vue.js">script>
<script>
const cpn = {
template: "#cpn"
}
const app = new Vue({
el:"#app",
components:{
cpn
}
})
script>
要注意到当模板中使用实例中的属性或者方法时，当前模板是vue实例挂载的模板还是组件的模板。如果当前模板是vue实例模板，那么调用属性和方法时，一定是调用的当前vue实例的属性和方法。如果是组件模板，那么调用时，一定是调用的vue组件实例中的属性和方法。
<div id="app">
<cpn v-show="isShow">cpn>
div>
<template id="cpn">
<div>
<div v-show="isShow">
<h2>我是子组件h2>
<p>我是内容p>
div>
div>
template>
<script src="./vue/vue.js">script>
<script>
const cpn = {
template: "#cpn",
data() {
return {
isShow: false
}
}
}
const app = new Vue({
el:"#app",
components:{
cpn
},
data:{
isShow:true
}
})
script>
如何能让插槽访问到子组件中的数据呢？
可以将子组件中的属性通过自定义属性名的方式传递给 slot插槽。
<div id="app">
<cpn>
<template v-slot:center="uProp">
<span>{{uProp.user.lastName}}span>
template>
cpn>
div>
<template id="cpn">
<div>
<slot name="center" :user="user">{{user.firstName}}slot>
div>
template>
<script src="./vue/vue.js">script>
<script>
const cpn = {
template: "#cpn",
data() { return {user:{firstName: "w", lastName:"lh"} }}
}
const app = new Vue({
el:"#app",
components:{
cpn
}
})
script>
<cpn>
<template v-slot:center="uProp">
<span>{{uProp.user.lastName}}span>
template>
cpn>
此代码块中，uProp其实是一个对象，可以将这个对象拆分。
<cpn>
<template v-slot:center="{user}">
<span>{{user.lastName}}span>
template>
cpn>
也可以将里面的对象，重命名。
<cpn>
<template v-slot:center="{user:person}">
<span>{{person.lastName}}span>
template>
cpn>
甚至，还可以设置默认值，用于当插槽prop是 undefined 情况。
<cpn>
<template v-slot:center="{user={firstName:'Guest'}}">
<span>{{person.lastName}}span>
template>
cpn>
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
<cpn>
<template #header="{user}">
<span>{{user.lastName}}span>
template>
cpn>
其实同具名插槽一样，匿名插槽也是有名字的，名称都为 default，当使用匿名插槽的时候，甚至可以不使用 + v-slot，而是直接在组件上使用 v-slot即可。
组件模板定义为：
<template id="cpn">
<div>
<slot :user="user">{{user.firstName}}slot>
div>
template>
使用时：只用了 v-slot，没有使用template标签
<cpn v-slot="{user}">
<span>{{user.lastName}}span>
cpn>
<cpn v-slot:default="{user}">
<span>{{user.lastName}}span>
cpn>
语法糖：
<cpn #default="{user}">
<span>{{user.lastName}}span>
cpn>
当使用模块化进行开发的时候，每个模块中(js文件中)的作用域都是互相独立的，不可能跨模块去访问到其他模块中的变量或者函数，必须通过export导出，将自己模块中的变量或者函数暴露给其他模块，然后其他模块通过import将这个模块中暴露出来的东西接收到，然后就可以使用了。
// 导出对象 es6的字面量增强写法
export {
flag, sum
}
// 导出变量
export var num1 = 1000
export var height = 1.77
// 导出函数
export function a(n1, n2) {
return n1 + n2;
}
某些情况系，一个模块中包含某个功能，我们并不希望给这个功能命名，而是让导入者可以自己来命名。这个时候就可以使用 export default，(在同一个模块中只能使用一次)但是只能导出一个。所以建议使用方式二，导出一个对象。
const address = "北京市"
// 方式一
export default address
// 方式二
export default {
address, ...
}
import {flag, sum} from './index.js'
import num1 from './index.js'
import height from './index.js'
import a from './index.js'
// 调用a函数
a()
导入所有，并且起个别名，那么这个别名中包含了所有导出的数据。注意：这个别名是一个对象。
import * as aaa from './index.js'
aaa.flag
aaa.sum
aaa.a()
前端模块化打包工具。开发中我们基于某些规范进行开发，比如es6的一些语法，但很可能别的浏览器中不支持这种语法，那么我们就需要webpack打包工具，将我们的项目打包成浏览器能够识别的一种资源。
webpack又依赖于nodejs环境，必须安装node，其中有一个npm包管理工具，用来管理node环境中的各种依赖包。
**首先安装好Node。**查看自己的node版本
node -v
然后使用npm命令安装 webpack打包工具
全局安装
npm install [email protected] -g
局部安装
–save : 局部安装-dev : 指定环境cd 对应目录下
npm install [email protected] --save-dev
为什么全局安装后，还需要局部安装？
在终端直接执行webpack命令，使用的是全局安装的webpack当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部的webpack. 基本使用使用组件化思想，开发。
比如，我有一个mathUtil.js文件，里面定义了一些函数。那么我如何去暴露给其他的模块？
commonjs写法function add(num1, num2){
return num1 + num2;
}
function mul(num1, num2){
return num1 * num2;
}
// commonjs写法 导出
module.exports = {
add,mul
}
在其他js中
const {add, mul} = require('./mathUtil.js') // 引入
console.log(add(10,20))
console.log(mul(10,20))
写完之后，你会发现，浏览器根本不能识别这种写法…，那么我们就需要使用webpack把这些都打包起来，然后会生成一个dist目录，目录下就是已经打包好的文件，我们可以直接在html文件中引入这些即可，浏览器会识别这些已经被webpakc打包后的文件中的语法。
执行打包。
# 打包main.js文件，生成在 dist目录下的 bundle.js文件
webpack ./src/main.js ./dist/bundle.js
那么为什么只打包了main.js文件呢，那个mathUtil.js怎么不打包？
因为webpack不仅会帮我们进行模块打包，而且还会自动帮我们处理模块之间的依赖关系。main.js依赖到了mathUtil.js，那么webpack会自动帮我们都打包好。
这里打包报错的同学，请你回去老老实实的去使用webpack3.6.0的版本，只需要安装一个全局的就行了，这里只是作为学习使用的
打包后生成一个 js文件，然后我们直接引入这个文件就可以了。
<body>
<script src="./dist/bundle.js">script>
body>
mathUtil.js
export default{
add, mul
}
main.js
import math from './mathUtil' // 因为导出的是一个对象，我直接用一个对象接收
console.log(math.add(10,20))
console.log(math.mul(10,20))
写完后，再次执行 webpack打包
webpack ./src/main.js ./dist/bundle.js
其实上面说到的commonjs模块化写法和es6模块化写法，并不只局限于哪一种，甚至我们可以两种一起使用，因为最后webpack都会把它们打包成浏览器能够看懂的语法。
webpack.config.js
使用webpack的配置来简化我们的webpack执行的命令。创建一个webpack.config.js
由于，我们需要到node中的path组件，我们需要先进行npm init进行下初始化
npm init
我们需要和终端进行交互，确认一些事项，然后完成后会生成一个 package.json的文件
这个文件，是用来记录我们的项目中的一些信息。
并且，当我们在package.json中增加了一些依赖后，需要执行 npm install，将这些依赖下载到项目中，执行后会生成一个package-lock.json的文件。
npm install
然后在 webpack.config.js中就可以使用 node中的相关组件
const path = require('path') // 使用 commonjs模块化方式导入 path组件
module.exports = { // 使用 commonjs模块化方式导出
entry:'./src/main.js', // 入口
output:{ // 输出到哪个文件中
path: path.resolve(__dirname, 'dist'), // 动态获取路径，拼接路径(这是一个决定路径)
filename:'bundle.js'
}
}
在终端中直接执行 webpack，然后执行过程中，它会自动去找 webpack.config.js文件，找里面的打包入口和打包出口文件。
webpack
在 package.json中
{
"name": "demo2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" // 在scripts中定义一个 build，那么 npm run build的时候，它会去找scripts中的名为 build的脚本，然后发现脚本是 webpack ，直接执行
},
"author": "",
"license": "ISC"
}
npm run build
即可。
局部安装webpack一般地，我们安装的webpack有整个电脑全局的，也有只想为某个项目安装的webpack(局部的)。默认情况下，当我们在项目下执行webpack的一些命令时，它优先于项目局部的webpack，如果项目中没有安装webpack，那么它就去找整个电脑全局安装的 webpack。
npm install [email protected] --save-dev
执行完后，会发现,package.json中多出了
"devDependencies": { // 就是dev(开发时)环境的依赖
"webpack": "^3.6.0"
}
而且多了一个node_modules的目录，这个目录中存放着所有项目本地的依赖。
注意：我们在终端中执行的webpack命令是使用的全局的webpack命令，只有当我们进入项目下的node_modules下找命令时才是执行的项目本地的。当然还有一个方法，就是npm run 和 webpack进行一个映射，它会优先于找项目本地的webpack。
流程梳理：终端执行 npm run build时，会去package.json中找响应的scripts脚本，然后找到了 webpack，再去webpack.config.js中找webpack具体的输入和输出位置，拼成命令然后执行。
认识一下loader，loader是webpack中一个非常核心的概念。可以将项目中的 scss、less转为css，将TypeScript转为ES5代码，将.jsx、.vue转换为js文件等等
如何使用？
npm安装loader在webpack.config.js中的modules关键字下进行配置。我们需要去安装所需要的loader。可去官网或中文网站查看，地址贴出来webpack中文网站
npm install css-loader --save-dev
npm install style-loader --save-dev
然后需要在webpack.config.js中配置module
const path = require('path')
module.exports = {
entry:'./src/main.js', // 入口
output:{ // 输出到哪个文件中
path: path.resolve(__dirname, 'dist'), // 动态获取路径，拼接路径(这是一个决定路径)
filename:'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
// css-loader负责加载css， style-loader负责解析渲染html
// 使用多个loader时，webpack读取时是从右向左读取的。
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
要注意use:[]中的loader的顺序，因为webpack是从右向左读取的，顺序不对很可能会报错的
然后，我们可以创建一个css文件，在main.js中把它当做模块导入一下。
// 依赖css文件，将css也当做一个模块
require('./css/normal.css')
后边，我们执行 npm run build即可。
如果执行后报错，Failed at the [email protected] build script.构建脚本的时候出现报错。
那么我们可以尝试将在package.json中，将css-loader和style-loader的版本调低
"devDependencies": {
"css-loader": "^3.6.0",
"style-loader": "^0.23.1",
"webpack": "^3.6.0"
}
然后再下载一次依赖，即可
npm install
再次执行build，即可。
npm run build
假如项目中使用less、scss、stylus来写样式，webpack也可以帮我们处理。
创建一个less文件，special.less
@fontSize: 50px;
@fontColor: orange;
body{
font-size: @fontSize;
color: @fontColor;
}
在main.js中依赖(引入)less文件
require('./css/special.less')
document.writeln('你好啊，李银河')
下载相应的loader(less-loader和less)
npm install less-loader less --save-dev
在webpack.config.js中配置 module
要注意：里面需要3个loader，没有安装的需要先安装下style-loader和css-loader
module: {
rules: [
// less相关的Loader
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
}
贴一个兼容的版本，在package.json文件中
"devDependencies": {
"css-loader": "^3.6.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"style-loader": "^0.23.1",
"webpack": "^3.6.0"
}
改好版本，记得npm install一下，安装一下相关的依赖。
打包即可。
npm run build
例如有一个normal.css中引入了一个图片
body{
/* background-color: red; */
background: url(../img/test.jpg);
}
安装url-loader
npm install url-loader --save-dev
配置webpack.config.js
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: { // 配置选项
// 当图片，小于limit时，会将图片编译成base64字符串形式
// 大于limit时，会使用file-loader加载图片，所以要先把 file-loader安装一下
limit: 8192
}
}
]
}
]
}
当图片大于limit时，需要使用到 file-loader，所以安装一下 file-loader
npm install file-loader --save-dev
然后执行打包npm run build，执行完后，当图片大于limit的限制时，低版本的 file-loader很可能会出现404文件找不到的问题。
解决方案：
在webpack.config.js中，配置文件
const path = require('path')
module.exports = {
entry:'./src/main.js', // 入口
output:{ // 输出到哪个文件中
path: path.resolve(__dirname, 'dist'), // 动态获取路径，拼接路径(这是一个决定路径)
filename:'bundle.js',
publicPath: 'dist/'
}
}
再次 npm run build即可。
那么后面真正的项目上线，是需要把index.html都打包到dist目录中的，所以后面项目中和可能用不到这个publicPath属性。
打包图片等资源文件时会发现，webpack会自动把文件打包到dist目录中，并且会自动给我们默认生成一个文件名。这是一个32位hash值的文件名，防止名称重复。
我们可以在options中对文件做相关的配置，如处理文件名称，处理文件所属目录。
loader: 'url-loader',
options: {
limit: 8192,
name: 'img/[name].[hash:8].[ext]'
}
webpack打包后的js文件中，写的ES6语法并没有转换为ES5,那么意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。
我们需要使用babel-loader来将ES6转换为ES5
安装：
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
配置webpack.config.js
{
// 匹配js文件
test: /\.js$/,
// 排除目录
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
npm run build打包即可。
通过npm安装vue，将vue当成了模块引入。因为后续在实际项目中用到的依赖，不必再设置为开发时依赖。
npm install vue --save
在main.js中引入vue
import Vue from 'vue'
const app = new Vue({
el:"#app",
data:{
message:"你好vue"
}
})
在index.html中使用
<div id="app">
<h2>{{message}}h2>
div>
打包
npm run build
打开浏览器后，发现报错：
[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.
vue在构建最后的发布版本时，有两种类型：
我们可以指定使用的是runtime-compiler版本类型，需要在webpack.config.js中配置resolve：
const path = require('path')
module.exports = {
entry:'./src/main.js', // 入口
output:{ // 输出到哪个文件中
path: path.resolve(__dirname, 'dist'), // 动态获取路径，拼接路径(这是一个决定路径)
filename:'bundle.js',
publicPath: 'dist/'
},
resolve:{
alias:{
// 当我们 import vue的时候，会去这个目录下找响应的vue发布版本
'vue$': 'vue/dist/vue.esm.js'
}
}
}
再次打包即可。npm run build
el是用来挂载一个块元素，将这个元素交给了vue来管理。但是实际开发中，我们不会在el所挂载的元素内做任何的改动，而是使用路由的方式来交替展示响应的内容。那么我们就可以将el挂载的元素中什么都不写。
<div id="app">
div>
然后在vue的实例中定义一个template模板，执行时这个定义好的模板会自动地将整个el挂载的元素替换掉。
import Vue from 'vue'
const app = new Vue({
el:"#app",
template: `
{{message}}
`,
data:{
message:"你好vue"
}
})
创建一个app.js文件，并导出一个组件对象。
export default {
template: `
{{message}}
`,
data(){
return {
message:"你好vue"
}
}
}
在main.js中使用这个组件对象。
import Vue from 'vue'
import App from './vue/app'
new Vue({
el:"#app",
template: '',
components:{
App
}
})
index.html中
<body>
<div id="app">
div>
<script src="./dist/bundle.js">script>
body>
创建一个app.vue文件，并且导出组件
{{message}}
注意，打包vue文件需要使用相应的loader(vue-loader和vue-template-compiler)
npm install vue-loader vue-template-compiler --save-dev
在webpack.config.js中配置rules：
{
test: /\.vue$/,
use: ['vue-loader']
}
配置完之后，如果你使用的是15及以上版本，那么很有可能会打包失败，因为高版本还需要依赖一个插件。
解决方案：
降低版本安装插件版本使用 13就行
"vue-loader": "^13.0.0"
记得npm install安装一下。
在main.js中使用
import Vue from 'vue'
import App from './vue/App.vue'
const app = new Vue({
el:"#app",
template: '',
components:{
App
}
})
导入时如何省略 .vue后缀呢？在webpack.config.js中配置extensions属性：
resolve:{
// 导入时，可以省略 .vue .js 文件后缀
extensions: ['.vue', '.js'],
alias:{
// 当我们 import vue的时候，会去这个目录下找响应的vue发布版本
'vue$': 'vue/dist/vue.esm.js'
}
}
import Vue from 'vue'
import App from './vue/App'
const app = new Vue({
el:"#app",
template: '',
components:{
App
}
})
npm run build一下即可。
一般对现有的框架进行扩展，webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等。
loader和plugin的区别：
loader主要用于转换某些类型的模块，它是一个转换器。plugin是插件，它是对webpack本身的扩展，是一个扩展器。如何使用plugin
通过npm安装需要使用的 plugins(某些webpack内置的插件不用安装)在webpack.config.js中plugins中配置。 横幅plugin使用为打包的文件添加版权声明，该插件的名称是 BannerPlugin，属于webpack自带的插件，那么直接使用就可以了。
在webpack.config.js中配置。
const path = require('path')
const webpack = require('webpack') // 引入webpack
module.exports = {
entry:'./src/main.js', // 入口
output:{ // 输出到哪个文件中
path: path.resolve(__dirname, 'dist'), // 动态获取路径，拼接路径(这是一个决定路径)
filename:'bundle.js',
publicPath: 'dist/'
},
plugins:[ // 声明plugins
new webpack.BannerPlugin("最终版权归 xxx 所有。")
]
}
打包后，可看到打包文件中头部包含版权信息。
npm run build
目前index.html是存放在根目录中的，但是真实的发布项目中，发布的是dist目录下的内容，但是dist中没有index.html文件，那么我们需要将 index.html打包到dist中，就需要使用到 HtmlWebpackPlugin插件。
HtmlWebpackPlugin插件的作用：
自动生成一个index.html文件(可指定模板)将打包的js文件，自动通过script标签插入到body中，那么我们项目根目录下的index.html中就没有必要去手动导入js了安装
npm install html-webpack-plugin --save-dev
在webpack.config.js中配置：
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'./src/main.js', // 入口
output:{ // 输出到哪个文件中
path: path.resolve(__dirname, 'dist'), // 动态获取路径，拼接路径(这是一个决定路径)
filename:'bundle.js',
// 因为把index.html打包到了dist下，所有index.html再访问时就不用再加 dist/了
// publicPath: 'dist/'
},
plugins:[
new webpack.BannerPlugin("最终版权归 xxx 所有。"),
new HtmlWebpackPlugin({
// 设置一个模板，会去找当前webpack.config.js文件所在目录下的， index.html文件
template: "index.html"
})
]
}
打包
npm run build
如果发现有问题，打包不成功，可以尝试将 html-webpack-plugin插件版本调整一下，然后再次打包即可。
安装
npm install [email protected] --save-dev
webpack.config.js配置
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjswebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry:'./src/main.js', // 入口
output:{ // 输出到哪个文件中
path: path.resolve(__dirname, 'dist'), // 动态获取路径，拼接路径(这是一个决定路径)
filename:'bundle.js'
// publicPath: 'dist/'
},
plugins:[
new webpack.BannerPlugin("最终版权归 xxx 所有。"),
new HtmlWebpackPlugin({
// 会去找当前webpack.config.js文件所在目录下的， index.html文件
template: "index.html"
}),
new UglifyjswebpackPlugin()
]
}
重新打包即可
npm run build
js文件丑化后，会把一些空格、注释等给我们删除掉，也就是我们上面用的版本声明就没什么用了。
webpack为我们提供了一个本地开发服务器，这个服务器基于nodejs搭建，内部使用了express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
安装
npm install [email protected] --save-dev
在webpack.config.js中配置 devServer，devServer也是webpack中的一个选项，有以下几种属性：
./dist即可port:端口inline:是否页面实时刷新historyApiFallBack:在SPA页面中，依赖HTML5的history模式
const path = require('path')
module.exports = {
entry:'./src/main.js', // 入口
output:{ // 输出到哪个文件中
path: path.resolve(__dirname, 'dist'), // 动态获取路径，拼接路径(这是一个决定路径)
filename:'bundle.js'
// publicPath: 'dist/'
},
devServer:{
contentBase: './dist', // 服务于 dist目录
inline:true,
port: 5000 // 端口 5000
}
}
启动服务，可以在package.json中再配置一条scripts脚本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --open" // 配置一条 dev脚本，并且 启动时自动打开浏览器
}
执行启动服务
npm run dev
它会自动打开浏览器页面，当我们在根目录下修改js文件中的内容时，然后保存文件，webpack-dev-server插件会帮我们执行编译，实时刷新我们访问的页面了。
开发中我们经常使用这样的方式提高开发效率，当一切都已就绪(代码都开发完毕了)后，执行一次npm run build打包一下就可部署了。
有些插件、依赖只会在开发时用到，上线时根本没有用，那么我们希望将这些配置进行分离，可以理解为区分开发环境和生产环境的配置文件。
对 webpack.config.js进行抽离
我们可以在根目录下创建一个build目录，这个目录下存放一些配置文件相关的。
创建一个base.config.js文件，此文件存放 开发时和生产时共用的一些配置。
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjswebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry:'./src/main.js', // 入口
output:{ // 输出到哪个文件中
path: path.resolve(__dirname, 'dist'), // 动态获取路径，拼接路径(这是一个决定路径)
filename:'bundle.js'
// publicPath: 'dist/'
},
// devServer:{
// contentBase: './dist',
// inline:true,
// port: 5000
// },
plugins:[
new HtmlWebpackPlugin({
// 会去找当前webpack.config.js文件所在目录下的， index.html文件
template: "index.html"
}),
new UglifyjswebpackPlugin()
],
resolve:{
extensions: ['.vue', '.js'],
alias:{
// 当我们 import vue的时候，会去这个目录下找响应的vue发布版本
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
rules: [
...
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
use: ['vue-loader']
}
]
}
}
创建一个生产时配置文件，prod.config.js
const UglifyjswebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
plugins:[
new UglifyjswebpackPlugin()
]
}
创建开发时配置文件，dev.config.js文件，将属于开发时的配置放置在 dev.config.js中
module.exports = {
devServer:{
contentBase: './dist',
inline:true,
port: 5000
}
}
此时，我们还没有将这些文件进行合并，我们需要安装一个依赖webpack-merge
npm install webpack-merge
在prod.config.js中
const UglifyjswebpackPlugin = require('uglifyjs-webpack-plugin')
const WebpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = WebpackMerge.merge(baseConfig,{ // 导出时合并 base.config.js和 prod.config.js
plugins:[
new UglifyjswebpackPlugin()
]
})
在dev.config.js中
const WebpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = WebpackMerge.merge(baseConfig, {
devServer:{
contentBase: './dist',
inline:true,
port: 5000
}
})
注意：在高版本中 require('webpack-merge') 获取到的是一个对象，而不是函数。
配置文件分完之后，webpack.config.js文件就没有用处了，删了即可。因为package.json会去默认去找webpack.config.js，所以在package.json中配置webpack分环境的配置文件。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/prod.config.js", // 指定生产环境
"dev": "webpack-dev-server --open --config ./build/dev.config.js" //指定开发环境
}
那么base.config.js中，需要把打包后的文件放到根目录下：
output:{ // 输出到哪个文件中， ../：找上一级目录
path: path.resolve(__dirname, '../dist'), // 动态获取路径，拼接路径(这是一个决定路径)
filename:'bundle.js'
// publicPath: 'dist/'
}
执行打包
npm run build
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）