Vue_03_webpack的使用

WebPack

webpack是一个项目打包工具，能把前端请求的css、JS等资源依赖，打包成模板，可以使前端请求的次数减少，减轻服务器压力。还有一个功能是，通过指定loader，可以实现将ES6新语法、scss、less等浏览器还不能支持的语法，转换为浏览器支持的。

node引入Webpack

npm i webpack webpack-cli

打包命令

// 3版本之后
webpack <entryPath> -o <outPath>
// 3版本之前
webpack <entryPath>   <outPath>

可以结合webpack-dev-server

npm i webpack-dev-server

在package.json scripts脚本对象上配置运行命令

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  }
   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --host localhost --port 3000 --contentBase ./src --hot"
  }

运行命令启动

npm run dev

基本配置

在项目根目录下新建 webpack.config.js文件，配置如下

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/main.js',  // 指定打包入口文件
  output: {
    path: path.join(__dirname, './dist'), // 指定打包输出目录，如果不存在，将建立这个目录
    filename: 'bundle.js' // 指定输出文件名
  },
  module: {
    rules: [
      // 指定各种打包文件要使用的loader。test正则表达式匹配
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // css文件
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },  // less文件
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // scss文件
      { test: /\.(jpg|png|gif|bmp|jpeg|eot|svg|ttf|woff|woff2)$/, use: 'url-loader' }, // 图片、字体文件
      // js文件，排除node_modules文件夹的文件，因为node_modules文件已经打包好了
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
      { test: /\.vue$/, use: 'vue-loader' } // vue文件
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

webpack处理css less scss

npm 下载loader

// css
npm i style-loader css-loader
// less
npm i less-loader less
// scss
npm i sass-loader

在指定的入口文件中引入对应资源，webpack就会去解析该资源，如果无法解析，就会去配置文件里的module对象里的rules找解析的loader解析

// 注意：如果less和css文件同名，则less会覆盖掉css的内容
import './css/index.css'
import './css/my.less'
import './css/index.scss'

webpack处理 图片、字体资源文件

npm 引入loader

npm i url-loader

引入了图片、字体文件，会被重命名一个hash64位的名称。可以手动指定配置

webpack处理ES6js文件、vue文件

npm 引入loader

// 注意 babel-core 6@ 只能支持babel-loader7@，不支持babel-loader8@
npm i babel-loader babel-core babel-plugin-transform-runtime
npm i babel-preset-env babel-preset-stage-0
npm i vue-loader vue-loader-plugin
npm i vue-template-compiler

要解析vue文件，需要引入vue指定的插件，然后在webpack的配置文件的plugins中声明

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  plugins: [
    new VueLoaderPlugin()
  ]
}

使用js loader时，注意针对一些ES6的新语法，浏览器还不能耐很好的支持。在node中，记得排除掉node_modules中的js文件，这些js文件都是已经封装好了的。
还需要在项目根目录下创建 .babel 文件

{
  "presets": [
    "env",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

---

如果出现报错，大部分都是版本之前的依赖问题，需要耐心查找官网或搜索解决