vue学习笔记之Webpack详解（模块与打包、loader、el和template区别、plugin）
我们从两个点来解释上面这句话：模块 和 打包
首先理解模块化
在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。
目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6。现在许多浏览器都不支持这些模块化范式，而webpack就出现了，它就可以把这些模块化工具通过webpack变成浏览器可以识别的东西。
并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。也就是说在进行模块化开始时候，就会产生非常复杂的导入导出网洛，这时候webpack就可以把这些依赖进行整合变成javascript代码，使浏览能能够识别
而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。
而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用（在后续我们会看到）。
然后现在是打包
打包如何理解呢？
就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。
和grunt/gulp的对比
grunt/gulp的核心是Task
我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css）
之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。
所以grunt/gulp也被称为前端自动化任务管理工具。
什么时候用grunt/gulp呢？
如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。
只需要进行简单的合并、压缩，就使用grunt/gulp即可。
但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。
所以，grunt/gulp和webpack有什么不同呢？
grunt/gulp更加强调的是前端流程的自动化，注重一步步完成创造的任务，模块化不是它的核心。
webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。是模块化的打包工具
下面就正式来演示如何真正使用webpack来做项目
准备工作
一、我们创建如下文件和文件夹：
dist文件夹：用于存放之后打包的文件
src文件夹：用于存放我们写的源文件
main.js：项目的入口文件。具体内容查看下面详情，并导入下面两个js文件导出的内容，并处理，文件放在src里面
mathUtils.js：定义了一些数学工具函数，内容导出，可以在其他地方引用，并且使用。文件放在src里面
info.js 定义变量并导出，也放在src里面
index.html：浏览器打开展示的首页html放在根目录里面就可以了
package.json：通过npm init生成的，npm包管理的文件，根目录里面
首先在main.js 和 mathUtils.js 和 info.js
info.js
export const name = 'why';
export const age = 18;
export const height = 1.88;
mathUtils.js
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
module.exports = {
add,
mul
}
main.js
// 1.使用commonjs的模块化规范
const {add, mul} = require('./mathUtils.js')
console.log(add(20, 30));
console.log(mul(20, 30));
// 2.使用ES6的模块化的规范
import {name, age, height} from "./info";
console.log(name);
console.log(age);
console.log(height);
然后把webpack就是一个模块化的打包工具，所以它支持我们代码中写模块化，可以对模块化的代码进行处理。
另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得非常方便了。
打包方法
进入到具体包里，然后使用webpack 加用来导入的js文件，对它进行打包，然后放到dist里面的js文件里，打包好的文件就可以在浏览器使用了
在index文件中
index.html
Title
//直接拿来用就可以了
入出和出口设置简便
如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？
当然可以，就是创建一个webpack.config.js文件，然后把入口和出口都写在上面
首先在根目录下新建一个webpack.config.js ，然后在终端使用命令 npm init 初始化项目导入path包，然后使用npm install 下载所依赖的包
webpack.config.js文件中
const path = require('path')
mudles.export= {
entry: './src/main.js'
output: {
path: path.resolve(_dirname.'dist')
//上面这个方法是把两个路径整合在一起，_dirname 变量就是node中表示当前文件的路径，然后找到dist
filename:'bundle.js'
}
}
上面这个文件配置好以后，这时候，直接使用webpack就可以直接运行
package.json中定义启动
就是在package.json 设置如何运行项目
比如上面我们的项目直接使用webpack就可以运行
现在我们可以把webpack放到package.json里面，然后设置如何去运行
package.json
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": { //看这里
"test": "echo \"Error: no test specified\" && exit 1"
"build": "webpack" //这里设置webpack会如何被运行
},
"author": "",
"license": "ISC"
}
然后终端运行 npm run build 效果一样 那为什么要这样做呢，下面就会给答案
先来了解下全局webpack和本地wenpack
因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。
所以通常一个项目，都有自己局部的webpack，也就是项目自身带的webpack
这里我们让局部安装webpack3.6.0
这样项目有了自身的webpack，当项目转移到其他电脑的时候，也不会因为webpack的版本不同发生错误，这就是好处
然后当你把终端执行命令配置到package.json ，这样vue会优先在本地webpack运行项目
什么是loader？
在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
对于webpack本身的能力来说，对于这些转化是不支持的。
那怎么办呢？给webpack扩展对应的loader就可以啦。
比如现在设置一个把背景颜色改成红色
入门main.js
// 1.使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtils.js')
console.log(add(20, 30));
console.log(mul(20, 30));
// 2.使用ES6的模块化的规范
import {name, age, height} from "./js/info";
console.log(name);
console.log(age);
console.log(height);
// 3.依赖css文件
require('./css/normal.css') //这里直接移入就可以了
然后去webpack下载好css和style的
下载完成后，然后在webpack.config.js 设置
webpack.config.js
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负责将样式添加到DOM中
// 使用多个loader时, 顺序是从右到左加载的，比如先要css文件进行加载，然后
将样式添加到DOM中
use: [ 'style-loader', 'css-loader' ] //顺序这样
}
]
}
}
less文件处理 – less-loader
望在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？
首先，还是需要安装对应的loader
注意：我们这里还安装了less，因为webpack会使用less对less文件进行编译
其次，修改对应的配置文件
添加一个rules选项，用于处理.less文件
main.js
// 1.使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtils.js')
console.log(add(20, 30));
console.log(mul(20, 30));
// 2.使用ES6的模块化的规范
import {name, age, height} from "./js/info";
console.log(name);
console.log(age);
console.log(height);
// 3.依赖css文件
require('./css/normal.css')
// 4.依赖less文件
require('./css/special.less') //这里加上依赖文件
document.writeln('你好啊,李银河!
')
webpack.config.js
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.less$/, //这里设置先把less解析成css，然后加载css，然后把css加到dom中
use: [{
loader: "style-loader", // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader", // compiles Less to CSS
}]
}
]
}
}
图片文件处理 – 资源准备阶段
对于导入背景图片是使用background-image：url()
这时候就需要使用url-loader
还有设置webpack.conih.js文件
webpack.conih.js
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/,
// css-loader只负责将css文件进行加载
// style-loader负责将样式添加到DOM中
// 使用多个loader时, 是从右向左
use: [ 'style-loader', 'css-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
}]
},
{
test: /\.(png|jpg|gif|jpeg)$/, //这里就是使图片能够解析
use: [
{
loader: 'url-loader',
options: {
// 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
// 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
limit: 8691, //这里就算是设置图片的最大值
name: 'img/[name].[hash:8].[ext]'
},
}
]
},
然后在css文件中导入照片背景，现在准备两张照片，一张8k以下，一张8k以上，先导入8k以下的照片
main.js中依赖css文件，结果是能够实现的
当你使用8k以上照片的时候就会报错
这时候就需要下载file-loader进行处理，
运行项目，使它打包，完成后就会发现在dist文件夹中多出了一张照片
并且浏览器上也报错，说没有找到照片，原因就是在运行index时候，就在执行打包的程序后，照片url上面的路径 是跟index同一个目录，如果复制dist里面的照片到跟index同一个根目录照片也会显示，所以就是目录问题，默认情况下，
然后，我们发现webpack自动帮助我们生成一个非常长的名字
这是一个32位hash值，目的是防止名字重复
但是，真实开发中，我们可能对打包的图片名字有一定的要求
比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复
webpack.config.js
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-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
}]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
// 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
// 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
limit: 13000,
name: 'img/[name].[hash:8].[ext]' //这里设置命名
//img：文件要打包到的文件夹
name：获取图片原来的名字，放在该位置，使 用 [name] 是表示这里设置一个name对象，获取图片的名字
hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
ext：使用图片原来的扩展名
},
}
]
}
]
}
}
但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确
webpack会将生成的路径直接返回给使用者
但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在url路径下再添加一个dist/
那么现在就可以使用这个属性，把所有url里面的路径前面加一些路径，就可以在
webpack.config.js中的出入那里，添加一个
const path = require(‘path’)
module.exports = {
entry: ‘./src/main.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘bundle.js’,
publicPath: ‘dist/’ //这里就是设置路径，在所有的url里前面加dist/，就是图片的使用路径，没有设置这个图片就无法显示并且找不到
},
}
ES6语法处理
上面进行了这么多转换，但是上面还是有许多es6的内容，还是有很多浏览器是不支持es6的，需要转换es5，下面就是如何转换如果希望将ES6的语法转成ES5，那么就需要使用babel。下面这段代码就是下载babel
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
配置webpack.config.js文件，在 module: {rules: [ ]} 里面，设置下面的代码
{
test: /\.js$/,
// exclude: 排除
// include: 包含
exclude: /(node_modules|bower_components)/, //这里排除这些文件夹node_modules|bower_components文件
use: {
loader: 'babel-loader',
options: {
presets: ['es2015'] //这里设置转化成es5
}
}
},
引入vue.js
如何在我们的webpack环境中集成Vuejs
我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装
注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖，而是平常不开发时候也需要依赖
然后引入了vue依赖，以后使用就需要一次次导入包了
下面实例
main.js
// 1.使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtils.js')
console.log(add(20, 30));
console.log(mul(20, 30));
// 2.使用ES6的模块化的规范
import {name, age, height} from "./js/info";
console.log(name);
console.log(age);
console.log(height);
// 3.依赖css文件
require('./css/aa.css');
//4.依赖less文件
require('./css/bb.less');
document.writeln('你好呀大傻逼
');
//5.依赖vue文件
import Vue from 'vue'
const app = new Vue({
el: '#app',
message: '你好呀大傻逼'
})
上面是index文件中
但是运行程序，没有出现想要的效果，而且浏览器中有报错
由图可以知道，我们默认使用的是runtime vue 这个东西是不知道模板template的，vue实例其实就是一个大模板，那么解决办法就是把运行vue改成runtime-compiler ，它可以编译模板
解决办法
webpack.config.js文件中
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [....]
},
resolve: {
// alias: 别名
alias: {
'vue$': 'vue/dist/vue.esm.js' //把vue运行的路径改成vue.esm.js
}
}
}
el和template区别
正常运行之后，我们来考虑另外一个问题：
如果我们希望将data中的数据显示在界面中，就必须是修改index.html
如果我们后面自定义了组件，也必须修改index.html来使用组件
但是html模板在之后的开发中，我并不希望手动的来频繁修改，
在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容，这里，我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素，然后vue实例中设置一个template模板
el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的app模板。
Vue组件化开发引入
学习组件化开发的时候，我说过以后的Vue开发过程中，我们都会采用组件化开发的思想。那么，在当前项目中，如果我也想采用组件化的形式进行开发。
我们一步步的去理解vue组件化开发是如何的
首先，我们先在main.js 中写以往我们经常写的vue组件的代码，下面的template里面的内容会替换app对应的内容，这样就能实现这个vue实现，但是组件化没有这么简单，这样子虽然能运行，但是所有代码都放在一个页面不是我们想要的
//5.依赖vue文件
import Vue from 'vue'
import App from './vue/app'
new Vue({
el: '#app',
template: `
{{message}}
{{name}}
`,
data(){
return{
message: '你好呀大傻逼',
name: '大傻逼'
}
},
methods: {
btnClick(){
}
}
})
于是我们创一个vue文件夹，然后创一个app.js ,里面的内容
export default{
template: `
{{message}}
{{name}}
`,
data(){
return{
message: '你好呀大傻逼',
name: '大傻逼'
}
},
methods: {
btnClick(){
}
}
}
然后再main.js中只需要导入就可以了
v//5.依赖vue文件
import Vue from 'vue'
import App from './vue/app' //这里导入app.js,并命名为App，对应下面注册的组件名
new Vue({
el: '#app',
template:'但是上面这样子还是没有实现代码间的分离，每种代码都是组合再一起
下面就是实现代码间分离
于是同样再vue文件夹下面创一个App.vue文件，.vue文件会自创好
这时候再安装解析vue文件和的loader就可以了
npm install vue-loader vue-template-compiler --save-dev
然后再webspack.config.js中的rules 中添加解析vue的代码就可以了
这时候运行，如果报还需要下载插件的话，因为vue14版本后，需要一些插件才能解析，所以可以去设置一下vue的版本 ，再执行下 npm install
package.json
"vue-loader": "^13.0.0", //^这个符号代表大于等于13小于14版本
这时候运行就能实现字体变色
这时候就实现通过实例调用组件，那么组件能调用组件么
再vue文件夹里创建cpn.vue组件
我是cpn组件的标题
我是cpn组件的内容, 哈哈哈
{{name}}
然后要把这个组件变为App组件的子组件，就需要再App.vue文件中设置
components: {
Cpn
}
并且使用子组件标签才能实现使用子组件的内容
{{message}}
{{name}}
还要把Cpn组件导入
这样子就可以实现组件内带有组件，这样最后形成一颗组件树，这就是组件化开发
认识plugin
plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
loader和plugin区别：
loader主要用于转换某些类型的模块，它是一个转换器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。
plugin的使用过程：
步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js中的plugins中配置插件。
下面，我们就来看看可以通过哪些插件对现有的webpack打包过程进行扩容，让我们的webpack变得更加好用。
一、添加版权的Plugin
该插件名字叫BannerPlugin，属于webpack自带的插件。（所以不需要再去下载），所以首先导进webpack的包，然后使用它插件，再webpack.config.js中
const path = require('path')
const webpack = require('webpack') //导入包
module.exports = {
...
plugins: [
new webpack.BannerPlugin('最终版权由aabb解释') //使用这个插件
]
}
打包html的plugin
目前，我们的index.html文件是存放在项目的根目录下的。
我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件
HtmlWebpackPlugin插件可以为我们做这些事情：
1、自动生成一个index.html文件(可以指定模板来生成)
2、将打包的js文件，自动通过script标签插入到body中
下面就是进行这两种操作
安装HtmlWebpackPlugin插件
npm install html-webpack-plugin --save-dev
使用插件，修改webpack.config.js文件中plugins部分的内容如下：
下面的template表示根据根包里模板来生成index.html，并且放到dist里面
另外，我们需要删除之前在output中添加的publicPath属性（因为之前把js文件打包到bundle.js,所以要再dist文件里也弄一个照片，publicPath的作用就是给所有url路径前面添加一个dist/ ，现在index转移到dist里面，所以这个路径就没有必要了）
否则插入的script标签中的src可能会有问题，然后导入这个htmlWebpackPlugin的包
const path = require('path')
const webpack = require('webpack') //导入包
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
...
plugins: [
new webpack.BannerPlugin('最终版权由aabb解释')
new htmlWebpackPlugin({
template:'index.html' //这个html是根目录的html，设置再这个模板，会直接复制到dist文件夹里
})
]
}
根目录下的index.html 中
Title
//再dist生成的index.html 会自动导入bundle.js
文件，所以这个模板就可以注释掉这个
dist里面的index,html
Title
//这个是通过模板复制过来的
//这个自动生成的
js打包文件压缩的Plugin插件
们必然需要对js等文件进行压缩处理
这里，我们就对打包的js文件进行压缩，就是把缩进，空格都去掉，并且把变量变小，把整体大小变小，这就是压缩
我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致
安装插件
npm install [email protected] --save-dev
然后再webspack.config.js文件中
const path = require('path')
const webpack = require('webpack') //导入包
const htmlWebpackPlugin = require('html-webpack-plugin')
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin') //这个包
module.exports = {
...
plugins: [
new webpack.BannerPlugin('最终版权由aabb解释')
new htmlWebpackPlugin({
template:'index.html' //这个html是根目录的html，设置再这个模板，会直接复制到dist文件夹里
}),
new uglifyjsWebpackPlugin()
]
}
搭建本地服务器
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。在webpack中使用之前需要先安装它
npm install --save-dev [email protected]
然后在webspack.config.js
const path = require('path')
const webpack = require('webpack') //导入包
const htmlWebpackPlugin = require('html-webpack-plugin')
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin') //这个包
module.exports = {
...
devServer: {
contentBase: './dist',
inline: true
}
}
}
devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：
contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
port：端口号
inline：页面实时刷新
historyApiFallback：在SPA页面中，依赖HTML5的history模式
然后下面就是设置使用服务器打开的方法
在package.json中
{
“name”: “meetwebpack”,
“version”: “1.0.0”,
“description”: “”,
“main”: “webpack.config.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack”,
“dev”: "webpack-dev-server --open " //这里设置dev为服务器的运行方式 --open参数表示直接打开浏览器
},
webpack配置分离
在我们使用webpack.config.js 这个配置文件的时候，会发现有许多代码是发布的时候没必要发布的，开发的时候，也没有必要留在开发时候用的代码，这时候就可以把这些有时候有用，有时候没用的代码分离出来
首先在根目录下创build 文件夹
然后 在build文件夹里创3个文件，分别是
base.config.js //基本的代码，所有时候都用的上的
dev.config.js //开发时候用，发布不需要用的
prod.config.js //发布时候用
然后把webpack.config.js 复制到这3个文件里，并且挑出他们需要的，
然后把
base.config.js 基本的代码，和另外两个代码适当的整合在一起就可以使用了，
整和代码需要安装marge插件
npm install webpack-marge --save-dev
完成后三个代码：
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: {
...
},
module: {
rules: [
...
]
},
resolve: {
...
},
plugins: [
...
],
}
dev.config.js
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig,{
devServer: {
contentBase: './dist',
inline: true
}
})
prod.config.js
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config') //同文件夹下的 ./
module.exports = webpackMerge(baseConfig,{
plugins: [
new uglifyjsWebpackPlugin()
],
})
整合完成后，还需要设置一下默认配置文件的路径
package.json
{
.....
"build": "webpack --config ./build/prod.config.js", //这里修改的发布的
"dev": "webpack-dev-server --config ./build/dev.config.js" //这里修改的开发的
},
设置完上面这个后会发现，打包后的dist和bundle.js 文件跑到build文件里去了，为什么呢
因为啊在 base.config.js 文件的打包出口设置那里的
output: {
path: path.resolve(__dirname, 'dist'), //这里的意思是在当前文件路径后面添加一个dist文件夹
filename: 'bundle.js', //然后把这个文件放进去这个文件夹
// publicPath: 'dist/'
},
所以打包后的dist和bundle.js 文件 自然就放到了和 base.config.js 同一个文件夹，只需要
output: {
path: path.resolve(__dirname, '../dist'), //把路径设为所在目录上一个目录里添加dist文件夹
filename: 'bundle.js',
// publicPath: 'dist/'
},
文件不用打后缀名的办法
只需要webspack.config.js文件中
resolve: {
// alias: 别名
extensions: ['.js', '.css', '.vue'], //加这段代码就可以
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
编译过程理解一下，再修改了文件后，先把文件放到内存里编译，最后放回硬盘