手动搭建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"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

其中scripts里面的属性都可以run动, 比如 npm run test;

所以可以手动添加, 比如添加 “build” : “webpack”, 那么

npm run build 等效于 webpack

2.5 局部安装webpack

以上都是用的全局安装的webpack, 但有时候有的项目用的特定版本进行的打包, 所以要用局部webpack;

用以下命令本地安装开发时依赖: -dev表示devDependencies

npm install webpack@3.6.0 --save-dev

安装完后package.json里会多一句devDependencies, 并且项目文件夹会多一个node_modules, 里面包含新安装的webpack

而直接输入webpack时, 默认用的全局版本打包;

如何使用本地webpack命令:通node_modules/.bin/webpack启动webpack打包

node_modules/.bin/webpack

通过2.4里面说的, package.json映射, 用npm run执行时,会优先用本地webpack; 不必像上述进入本地webpack路径

3. 安装vue

3.1安装全局vue:

方式1: npm install vue --save

3.2 import Vue

main.js里可以用vue实例了:

//使用vue进行开发
import Vue from 'vue'
var vm = new Vue({
  el: '#app',
  data: {
    message: '23333',
  },
  methods: {
    handle1: function(event) {

    },
  },
})

html里绑定id=“app”.

3.3 打包前需要改别名

此时直接 npm run build打包会报错, 参考debug记录里, 通过alias方法改别名就能定位到vue.js了

  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  },

4. 开始使用vue

main.js如下:

//CommonJS方式引入
const { add, mul } = require('./mathUtils.js')

console.log('main');
const mmm = '123';

console.log(add(20, 30));
console.log(mul(20, 30));

//使用vue进行开发
import Vue from 'vue'
//组件化
const App = {
  template: `    
    <div>
      <h1>{{message}}</h1>
      <button @click="btnClick">按钮</button>
      <h2>name</h2>
    </div>`,
  data() {
    return {
      message: '23333',
      name: '葫芦娃'
    }
  },
  methods: {
    btnClick: function(event) {
      console.log('点了');
    },
  },
}


var app = new Vue({
  el: '#app',
  //写组件,template会替换el绑定的div里的部分
  template: '<App/>',
  data: {},
  //注册上面的组件App
  components: {
    App: 'App',
  }
})

跑npm run build, 不会报错, 成功显示;

5. 用.vue文件封装整理vue组件

新建App.vue文件:

<template>
  <div>
    <h1 class="title">{{ message }}</h1>
    <button @click="btnClick">按钮</button>
    <h2>{{ name }}</h2>
  </div>
</template>
<script>


export default {
  name: "App",
  components: {
    myCpn: Cpn,
  },
  data() {
    return {
      message: "App.vue里面的组件",
      name: "葫芦娃",
    };
  },
  methods: {
    btnClick: function (event) {
      console.log("点了");
    },
  },
};
</script>
<style scoped>
.title {
  color: aqua;
}
</style>

main.js里改变导入:

//使用vue进行开发
import Vue from 'vue';
// import App from './vue/app.js';
import App from './vue/App.vue'

解析.vue文件需要vue-loader以及vue-template-compiler; 而且这个.vue文件里有style样式, 所以需要css-loader, style-loader;

安装css-loader:

npm install css-loader --save-dev

安装vue-loader:

npm install vue-loader vue-template-compiler --save-dev

然后修改webpack配置:

  //module里写loader的规则
  module: {
    rules: [{
        test: /\.css$/,
        //从右到左, 先把vue里的style标签解析成css文件,然后在html里加入样式
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.vue$/, //匹配.vue文件
        use: ['vue-loader']
      }
    ]
  },