手动搭建Vue CLI(用webpack 配置vue项目)---练习使用webpack打包

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"
  }