基于webpack从0配置vue开发

时间 2020-04-20

标签基于 webpack 配置 vue 开发繁體版

原文原文链接

vue 官方为了让开发者快速进行开发，为了很大的精力，提供了vue-cli脚手架，只需简单几步，就能开始vue的开发了。css

然而，对项目里的webpack封装和配置了解的不清楚，就容易致使出问题不知如何解决，甚至不会经过webpack去扩展新功能，对webpack+vue项目到底是怎样搭建起来的感到一脸懵逼。html

本文就是要解决这个问题。前端

初始化项目：

打开terminal，经过如下命令生成项目目录：vue

mkdir vue_webpack_demo
复制代码

进入项目目录，并生成 package.json 文件（主要是项目的基本信息）：node

mkdir vue_webpack_demo && npm init
复制代码

安装webpack及脚手架

在安装好了node开发环境后，经过如下命令安装：webpack

npm i -D webpack webpack-cli
复制代码

此时webpack和webpack-cli会被安装到项目目录的node_modules目录下，同时webpack和webpack-cli会被添加到package.json 文件中的devDependencies(由于只是辅助开发，因此在此)对象中。css3

由于写当前博客的时间是2019年12月，因此安装的webpack是webpack4的最新稳定版本，不少配置都有默认的了。web

配置ES6+转码为ES5:

babel-loader能够将ES6代码转为ES5代码，从而能够在现有环境执行，因此咱们能够用ES6编写，而不用考虑环境支持的问题。正则表达式

例如IE9根本看不懂代码写的let和const是什么东西？只能选择报错，这就是浏览器对ES6的兼容性问题；咱们能够经过 babel-polyfill 对一些不支持新语法、兼容性差的客户端提供新语法的实现。vue-cli

npm i -D babel-loader @babel/core @babel/preset-env
复制代码

而后，在项目根目录下新建一个src文件夹，而后再建一个 index.js 文件，

mkdir src && cd src && vi index.js
复制代码

在 index.js中，写上2句代码：

const str = 'word';
console.log('hello ', str);
复制代码

由于写当前博客的时间是2019年12月，因此安装的webpack是webpack4的最新稳定版本，不少配置都有默认的了。因此在项目根目录下执行如下命令：

webpack
复制代码

就会把src的默认入口文件 index.js 打包到dist目录下。

建立webpack.config.js文件

在项目根目录下增长webpack.config.js文件：

vi webpack.config.js
复制代码

而后写入如下配置：

module.exports = {
  mode: 'development', // 打包模式
  entry : './src/index.js', // 入口文件
  output : {
      filename : 'index.js', // 输出文件名
      path :  __dirname+'/dist' // 输出文件的根路径
  },
  module : {
      rules: [
          {
              /*将js文件转码成es5*/
              test: /\.js?$/,
              use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
          },
      ]
  },
}
复制代码

而后在package.json的scripts先添加下面这个指令：

"build": "webpack --config ./webpack.config.js",
复制代码

最后在terminal中运行:

npm run build
复制代码

能够看到根目录会生成一个 dist 文件夹，包含一个由 src/index.js 打包出来的index.js。

使用 html-webpack-plugin来建立html页面

安装html-webpack-plugin插件

npm i -D html-webpack-plugin
复制代码

添加入口文件在根目录下建立 index.html 文件：

vi  index.html
复制代码

添加下面代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>作有追求的码农</title>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>
复制代码

修改webpack.config.js配置

const path = require('path');
const HtmlWebpackplugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development', // 指定开发者打包模式
  entry : './src/idex.js', //入口文件
  output : {
      filename : 'index.js',
      path :  __dirname+'/dist'
  },
  module : {
      rules: [
          {
            /*将js文件转码成es5*/
            test: /\.js?$/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
      ]
  },
  plugins:[
    new HtmlWebpackplugin({
      filename: 'index.html', // 打包后的文件名，默认index.html
      template: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板
    })
  ]
}
复制代码

查看效果运行npm run build ，咱们能够看到 dist 文件夹下有一个index.html生成了，并且还引入了src/index.js的压缩包index.js。

安装配置并使用vue

安装vue及其插件：

npm i vue && npm i -D vue-loader vue-template-compiler
复制代码

其中，vue-loader 用于解析.vue文件，vue-template-compiler 用于编译模板。

修改webpack.config.js配置

const path = require('path');
const HtmlWebpackplugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development', // 指定开发者打包模式
  entry : './src/idex.js', //入口文件
  output : {
      filename : 'index.js',
      path :  __dirname+'/dist'
  },
  module : {
      rules: [
          {
            /*将js文件转码成es5*/
            test: /\.js?$/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },            
          {
            test: /\.vue$/,
            use: [
              {
                loader: 'vue-loader',
                options: {
                  compilerOptions: {
                    preserveWhitespace: false
                  },
                }
              }
            ]
          },
      ]
  },
  plugins:[
    new HtmlWebpackplugin({
      filename: 'index.html', // 打包后的文件名，默认index.html
      template: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板
    }),
     new VueLoaderPlugin()
  ]
}
复制代码

使用vue 在 src 新建一个 App.vue：

cd src && vi App.vue
复制代码

在App.vue 中添加如下代码：

<template>
  <div class="App">
    要作 {{msg}} 的码农
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
        msg: "有追求的",
    };
  }
};
</script>
复制代码

修改src/index.js的代码为：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app');
复制代码

打包及运行vue 再次运行：

npm run build
复制代码

而后在浏览器打开 dist/index.html，能够发现vue已经能够运行了。

安装本地服务及代码热更新

安装webpack-dev-server

npm i -D webpack-dev-server 
复制代码

修改webpack.config.js配置

// ...
    devServer: { 
        host: 'localhost',
        port: 9527
    },
// ...
复制代码

在package.json的scripts中增长一行启动本地服务指令：

"start": "webpack-dev-server",
复制代码

默认会读取根目录下的webpack.config.js配置文件。

运行以及查看效果

npm start
复制代码

用浏览器打开 http://localhost:9527/, 就能够本地开发了哦！并且当咱们修改 src/App.vue 的代码后，浏览器是会自动刷新的(热更新)。

目前为止，一个简单的vue项目咱们已经搭建出来了，以后咱们能够像堆积木同样添加本身想要的功能了。

须要注意的是，devServer生成的文件是存在咱们电脑的内存中的，不在咱们的硬盘上。

加一些经常使用的loader

对于webpack来讲，默认只能打包处理JS文件，或者说JS模块，可是webpack做为模块打包工具，须要打包的模块确定不只仅只有JS模块，还有：图片模块，CSS模块等等。

loader就是帮助webpack打包那些webpack默认打包不了的模块的工具；配置第三方loader，须要在webpack的配置文件中新增一个module节点，节点中是一个一个的规则集合，集合名字是rules，须要添加loader就在rules的集合中新增一个规则；每一个规则必须的两个配置：

test ：test搭配的是键值对，值是一个正则表达式，用来匹配要处理的文件类型；
use ：用来指定使用哪一个loader模块来打包处理该文件；

安装一些经常使用的loader

npm i -D  css-loader style-loader url-loader postcss-loader autoprefixer
复制代码

其中：css-loader主要是解析 css 文件，style-loader 主要是将 css 解析到html页面的style上，postcss-loader和autoprefixer实现自动添加css3前缀。

特别是: file-loader能够用来帮助webpack打包处理一系列的图片文件，而url-loader它除了作file-loader能作的事情，还会经过配置规则将必定范围大小的图片打包成base64的字符串，放到dist.js文件里，从而减小https的图片请求数。

在webpack.config.js中增长配置

// ...
{
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require("autoprefixer") /*自动添加前缀*/
                ]
            }
        }
    ]
},
{
    test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
    use: [{
      loader: 'url-loader',
      options: {
        limit: 10000
      }
    }]
}
复制代码

自定义环境变量和常量

经过 webpack提供的DefinePlugin插件，能够很方便的定义环境变量

const NODE_ENV = process.env.NODE_ENV; // webpack编译时会获取node环境的配置信息
const config = {
     production: { // 生产环境(线上环境)
        DOMAIN: 'production.com', // 上线域名
     },
     development: { // 开发环境
        DOMAIN: 'development.com', // 测试域名
     }
}
module.exports = config[NODE_ENV];
复制代码

修改webpack.config.js文件

// ...
const constant = require('./config'); 
// ...
plugins:[
        // ...
        new webpack.DefinePlugin({ 
          CONSTANT: JSON.stringify(constant)
        })
        // ...
    ],
// ...
复制代码

修改package.json

"scripts": {
    "start": "NODE_ENV=development webpack-dev-server",
    "build": "NODE_ENV=production webpack --config webpack.config.js"
  },
复制代码

NODE_ENV=development和NODE_ENV=production指定node环境

运行及调试因为修改了webpack.config.js因此须要从新运行npm start, 而后在src/idex.js后面加上一句测试代码：console.log(CONSTANT);

能够看到，配置成功打印出来了。

总结：

vue-cli是一个封装得很完美的vue脚手架，因此它的适应性很强；可是有些大公司他们的前端项目通常不会直接套用这种脚手架，而是须要结合公司内部的组件一步步搭起一个vue前端项目。

单纯的vue架构是很是简单的，可是结合到node环境和webpack一块儿用的话，有一些不是太熟悉node、webpack的前端同窗就会有些蒙圈。

本文咱们主要是搭建了一个基于webpack的vue开发环境，而后将须要的东西一件一件组装起来，虽然不算太完善，可是学会了这种思路的话，咱们处理其余前端项目也不难了。