Vue Webpack介绍及安装

@TOC

1 Webpack介绍及安装

https://webpack.js.org/concepts/

https://www.webpackjs.com/

本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具

安装：

首先要安装Node.js、版本大于8.9
查看node版本

代码语言：shell复制

node -v

全局安装webpack(指定3.6.0、因为vue cli2依赖该版本)

代码语言：shell复制

npm install webpack@3.6.0 -g

局部安装

代码语言：shell复制

cd 对应目录
npm install webpack@3.6.0 --save-dev

为什么全局安装后，还需要局部安装呢？

在终端直接执行webpack命令，使用全局安装的webpack
当package.json中定义了scripts时时，其中包含了webpack命令，那么使用的是局部webpack

2 webpack起步

打包

代码语言：shell复制

webpack ./src/main.js ./dist/bundle.js

3 webpack配置

webpack.config.js

代码语言：javascript复制

// 使用node的包path
// 初始化: npm init
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname,'dist'),// 当前文件绝对路径
    filename: 'bundle.js'
  }
}

打包

代码语言：shell复制

webpack

使用脚本

代码语言：shell复制

# 初始化
npm init
# 安装package-lock.json中的依赖
npm install

package.json文件中scripts存放脚本，可以自定义

代码语言：javascript复制

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

代码语言：javascript复制

# 测试脚本

npm run test
# 打包
npm run build

4 loader

4.1 css-loader、style-loader

通过npm安装需要使用的loader

https://www.webpackjs.com/loaders/css-loader/

安装cssl和style的loader

代码语言：shell复制

npm install --save-dev css-loader
npm install style-loader@2.0.0 --save-dev

file.js

代码语言：javascript复制

import css from 'file.css';

webpack.config.js

代码语言：javascript复制

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

在webpack.config.js中module关键字下进行配置

4.2 less-loader

代码语言：shell复制

npm install --save-dev less-loader less

5 webpack图片文件处理

url-loader

代码语言：javascript复制

npm install --save-dev url-loader

{
  test: /.(png|jpg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192
      }
    }
  ]
}

css

代码语言：css复制

body {
    /*background-color: pink;*/
    background: url("../img/1.jpg");
}

6 webpack使用vue的配置

代码语言：shell复制

npm install vue --save

webpack.config.js

代码语言：javascript复制

// 指定查找vue的路径
resolve:{
  // alias: 别名
  alias:{
    'vue$':'vue/dist/vue.esm.js'
  }
}

main.js

代码语言：javascript复制

// 5.使用vue进行开发
import Vue from 'vue'

const app = new Vue({
  el: '#app',
  data: {
    message: '你好'
  }
})

代码语言：shell复制

npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev

前端 javascript vue.js webpack2

0 人点赞