webpack 相关文章确实有很多，但是一圈看下来并不能让自己顺畅得掌握这条技术路径，还需要各种摸索，为了给后来的可能看到这个文章的人少走些弯路，我把我关于webpack和VUE的探索路径记录下来。相关webpack的概念，这里涉及但是不讲解，请参考文档。
网上文章搜索出来，不少都是从Vue-Cli 起手，但是，这种高度集成的脚手架工具，用作业务开发固然非常迅速，但是，用于基础技术过程的了解，就不太合适了，我的这个系列的文章，希望从最最基础开始，手动搭建一下webpack和vue的开发环境。
webpack的使用：
1，安装webpack相关的包
npm install webpack webpack-cli webpack-dev-server -g
安装后，目前对应的版本是：
webpack 5.44.0; webpack-cli 4.7.2; webpack-dev-server 3.11.2
这里采用全局安装而不是安装在 devDependencies是为了手动操作时方便，正式开发的时候，都是安装再devDependencies里的。
2，webpack 在原生JS当中的使用
创建一个项目目录，创建三个文件：
文件内容分别为：
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script src="./src/index.js"></script></body></html>
moduleA.js
export default function(){ document.write('this is a message from Module')}
src/index.js
import moduleA from '../moduleA'document.write('a infomation from JS')moduleA()
这个时候，直接运行index.html文件，就会报错：Uncaught SyntaxError: Cannot use import statement outside a module。
因为import是ES6 的语法，浏览器无法识别。
而webpack的作用就是把浏览器无法识别的文件打包成为浏览器可以识别的文件。
因为之前已经全局安装了webpack，所以，直接在终端中输入 “webpack” ，就可以对文件进行打包处理。webpack默认的打包入口文件是 /src/index.js 所以，无需额外的配置，就可以直接使用webpack，打包结果位 /dist/main.js
这个时候，在indexl.html 的script 引用中，把引用路径从 './src/index.js'替换为'./dist/main.js',运行html文件，得到结果为：
到此，webpack 在原生JS的应用案例完成。
Vue的使用
Vue的使用，参考Vue官方文档，通过script 标签在html文件中引入Vue库，然后新建一个Vue对象，挂载到DOM元素上。这里不多赘述，主要在下面详细说明下Vue结合Webpack遇到的一个小坑。
webpack与Vue的结合使用
webpack 与vue 的结合时，和webpack的原生案例其实非常相近，通过npm 安装过Vue后，把
import moduleA from '../moduleA'
替换为
import Vue from 'vue'
然后，使用webpack打包，将打包后的js文件，通过script 标签，引入html文件当中。
但是，直接这样简单的操作，是无法得到想要的结果的，因为通过npm安装的Vue 在用import引入的时候，引入的包默认为：vue.runtime.common.js
这点在node_module/vue/package.json 当中可以查到。
"main": "dist/vue.runtime.common.js"
而要正确的在webpack+vue 的项目中引用vue，需要在webpack.config.js 文件当中进行配置。
这个文件之前是没有提及的，现在需要新建出来，放到项目的根目录下面。
这个文件没有时候，webpack会有自己的默认设置，而根目录下面有这个文件之后，webpack会读取这个文件当中的配置。
webpack.config.js
const path=require('path')module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, devServer:{//dev server 的配置，本文没有提及 port:8080, publicPath:'/dist' }, module:{//webpack 的loader ,本文没有提及 rules:[ { test:/\.css$/, use:['style-loader','css-loader'] }, { test: /.vue$/, loader: 'vue-loader' }, ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, }, };
在webpack的配置文件当中，通过resolve 的alias 当中，把vue 指向 vue.esm.js，这样，Vue在webpack+vue的项目当中，就可以被正确的引用了。
