Vue CLI安装过程(用webpack 配置vue项目的安装过程)—1. 练习使用webpack打包
文章目录
1. Node环境
webpack基于node环境, 所以先在官网下载安装node; 一路点确定即可;
打开终端:
win+R; 然后输入cmd
确认node已经安装好:
node -v
一般这样就好了,如果没好再去百度配置下环境变量path;
以后的依赖都要通过npm安装, 把npm看成一个应用商店. 默认情况安装node会自动安装npm, 同样确认npm是否已经安装好:
npm -v
2. 安装并使用webpack
2.1 webpack的全局安装
在终端通过npm全局安装:
npm install webpack@3.6.0 -g
说明: webpack还能通过–save-dev局部安装, 先不管; 然后上面指定了版本号3.6.0, 因为后面要用CLI版本2.0依赖webpack3.6.0; 不指定版本号就默认安装最新版
2.2 练习webpack使用
新建文件夹和文件:
webpack将src里面我们写的代码打包放到dist文件夹里; 然后随便写个main.js, 和它所依赖的一个js文件;
注意此时不要新建一个空白的package.json放这,否则会报错;
然后vscode点左下角打开终端,或者直接ctrl+`:
webpack_try>webpack ./src/main.js ./dist/bundle.js
成功打包会自动在dist里生成bundle.js文件;
bundle.js文件,是webpack处理了项目直接文件依赖后生成的一个js文件,我们只需要将这个js文件在index.html中引入即可; 至于src里面多个相互依赖的js文件,我们不用管它们的依赖关系/依赖方式了.
不管是用CommonJS还是es6, AMD, CMD模块化规范, webpack都能打包好;
2.3配置webpack文件以简化命令
刚才打包一个文件要像linux一样给输入输出路径,非常麻烦. 可以在webpack.config.js里进行配置入口出口等信息, 简化打包命令:
//webpack.config.js文件
const path = require('path')
module.exports = {
entry: './src/main.js',
//出口是对象, 分路径和文件名
output: {
//path里写绝对路径
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
}
npm init
初始化,生成package.json
npm install
加载依赖,生成package.lock.json
webpack
更上一part的webpack ./src/main.js ./dist/bundle.js等效了,按照webpack.config.js里的出口入口打包
2.4 package.json映射到npm run指令
默认生成的package.json文件如下:
{
"name": "webpack_try",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}