webpack配置vue简明教程

1.安装webpack

使用npm安装webpack,-g表示全局安装,不加-g则是本地安装

npm install webpack -g

2.使用webpack

2.1.直接使用webpack命令

webpack src.js -o bundle.js

src.js:需要打包的入口文件

bundle.js:打包的目标文件

2.2.使用配置文件

步骤:

1. 在项目目录下创建webpack.config.js文件.
2. 编写入口和出口.

例:

const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

3.使用loader

3.1.安装loader

在webpack官网上找到对应loader,按照上面的指示安装loader.如需要打包css文件,需要安装style-loader和css-loader,css-loader负责装载css文件,style-loader负责将css添加到dom中.

安装style-loader

npm install style-loader --save-dev

安装css-loader

npm install --save-dev css-loader

3.2.使用loader

webpack不能直接打包css,less等非js文件,需要使用loader对这些文件进行加载.

使用loader的步骤如下:

1. 在webpack.config.js中添加loader.例:

const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //css-loader只负责加载css文件
        //style-loader负责将样式加载到DOM中
        //使用多个loader时,从右向左生效
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

2. 在需要打包的js文件中导入css,less等文件.例:

require('./css/normal.css')	//使用CommonJS的方法导入css文件

4.webpack配置vue

4.1.安装vue

在项目目录下输入以下命令安装vue,安装之后可以看到vue被写入到package.json的dependencies中.

npm install vue --save	//npm5.0之后--save为内置参数,可省略

4.2.导入vue

在js文件中导入vue即可使用vue.

import Vue from 'vue'

4.3.webpack配置

在webpack.config.js的module.exports中添加:

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

添加别名之后才能正常的编译vue.