vue2-2 打包工具webpack

webpack将浏览器无法识别的语言，格式，都转为可以识别的形式,

　　浏览器可以直接调用并识别的：html， css， js

　　如果要在js中使用模块化思想进行开发，如使用commonJS, ES6的模块导入导出来进行开发，那浏览器是不识别的。

 　　此时，就需要webpack来处理， 并且，webpack会自动将js中导入的依赖，也进行打包。

 

1.  webpack需要nodejs支持

　　node:  可以支持js代码的运行，（之前，js代码想要执行，必须要有一个html文件，并且导入js文件，然后才能在html中使用js）

　　npm为nodejs的库管理工具，类似于python的pip工具

# 系统： ubuntu    版本： 18-20

sudo apt-get install nodejs 
sudo apt install libssl1.0-dev nodejs-dev node-gyp npm
sudo apt install npm

#  查看版本(8.9版本以上都支持cil脚手架)

node -v

 

2.  安装webpack

#  根据需求，安装对应版本，vue cli 2.0 脚手架 使用 3.6.0版本的webpack
# -g  安装到全局

npm install webpack@3.6.0 -g

#  查看版本

webpack  --version

 

3.  webpack的文件结构

　　项目文件夹：

　　　　-- dist文件夹（打包后的文件存放处）

　　　　-- src 文件夹 （源码文件存放处）

　　打包命令：

webpack  ./src/main.js   ./dist/自定义名称.js

 

4.  打包后的js文件使用

　　.html中引入js文件使用

 <script src="./dist/bundle.js"></script>