webpack搭建vue简易脚手架

假设项目为webpack-vue，已有 package.json。

安装基本依赖

1)webpack

装webpack:

npm install webpack webpack-cli --save-dev

这次尝试一下es6语法，webpack的配置文件也有些许变化。

2)babel

npm install babel-loader babel-core babel-preset-env --save-dev

3)eslint

npm install --save-dev eslint

在项目根目录添加.babelrc文件，其中内容是

{
    "presets": [
        "env"
    ]
}

这里，如果参考了其他的库对babelrc进行修改，注意如果加入了

    "presets": [
        ["env", {
            "modules": true
        }]
    ],

那么就不能再webpack配置文件中使用es6的import新语法了。

所以，不加 “modules”: true。

我是因为要按需引入element-ui组件时发现它要求修改babelrc，就摸到了这点。

按需加载后打包的从2m多降到了不到1m（当然是目前用的组件比较少）。

4)vue

npm install vue —save

其他依赖：css-loader style-loader，加载字体和图片的file-loader, url-loader等，根据需求添加。如果要引入element-ui这样的组件库，那么很可能需要用这些loader来对特殊资源进行加载和打包。

初始化

1)eslint

eslint --init

设置自己需要的规则。

然后在项目根目录生成了.eslintrc.js文件。可以在其中自定义规则。

注意要”env”规则要开启”node”: true，才可以使用__dirname等node环境下的特有变量。

同理，只有开启了浏览器环境，才可以使用浏览器环境特有的window变量。

2)webpack

在package.json中指定webpack打包脚本，

  "scripts": {
     // ...你的脚本配置
    "build": “webpack”     // webpack脚本配置
  },

这样就可以通过npm run build的方式，让webpack利用默认配置文件进行打包。这个默认配置文件就是webpack.config.js，但是因为这里采用了es6语法，要使用babel对webpack配置文件进行编译，所以，webpack文件的默认配置文件变为webpack.config.babel.js。现在在项目根目录建立webpack.config.babel.js，然后使用es6语法进行设置。

webpack配置文件初期的模板参考。

这里建立了src目录，其中js目录用于存放js文件，app.js文件作为主入口，将需要的js都打包输出到webpack-vue/build/bundle.js中。

import path from 'path';

export default {
    entry: ‘./src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    }
};

可以运行 npm run build尝试一下。

要注意entry的形式，可以是上面这样的相对路径，也可以path.join(__dirname, ‘src/js/main.js’)。但是’src/xxx.js’似乎不行。

初始化包括但不限于上述步骤。还可以包括建立.gitignore、.editorconfig、.eslintignore等等，编写符合项目需求的配置文件。

开始编码工程

1、测试

在项目根目录下增加一个index.html，内容是：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>webpack-vue</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
 <div id=“app">hello</div>
  <script src="build/bundle.js"></script>
</body>

</html>

然后，

// src/js/app.js
alert('hello world’);

webpack新增module配置，一定要注意module是不带s的，后面的plugins倒是带s

  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /ndoe_modules/
    }]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
  }

后面的resolve配置用于给页面增加vue编译时环境。因为默认只有运行时环境，这样没法在客户端编译模板，或者挂载到一个元素上并以其 DOM 内部的 HTML 作为模板（比如这里是把vue应用挂到了#app上）

现在运行npm run build，再打开index.html就可以看到效果了。

2、插件

1）让webpack把css打包到bundle.js。

安装loader：npm install --save-dev css-loader style-loader

在webpack的rules数组中添加一条规则：

{
      test: /\.css$/,
      loader: 'style-loader!css-loader'
}

这时只要在某个入口里，用import ‘你的css路径’; 这种方式就可以将样式打包到bundle.js中。

2）利用html作为模板，自动引入打包后的文件(如本文中的bundle.js)

安装插件：npm install –save-dev html-webpack-plugin

webpack配置文件引入插件：

import HtmlWebpackPlugin from 'html-webpack-plugin’;

添加插件配置：

  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html’
    })
  ],

这个template就是之前编写的index.html文件。现在可以把其中对bundle.js文件的引用删除。也可以把它移到别的路径，比如src里。

再build一次，发现在build目录自动生成了index.html，而且引入了打包后的bundle.js。

3）And
还有把图片、字体等东西打包到bundle.js中的url-loader。

用于开发的简易服务器。

安装：npm install --save-dev webpack-dev-server

  devServer: {
    contentBase: './build'
  },

脚本："dev":"webpack-dev-server --open”, npm run dev就可以打开看效果了。

字体loader规则：

字体规则：

{
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000
      }
    }

或者

{
      test: /\.(ttf|eot|woff|woff2)$/,
      loader: 'file-loader',
      options: {
        name: 'fonts/[name].[ext]',
      }
    }

4）单文件模板加载和解析

还有加载和编译vue单文件模板的loader：

安装：npm install --save-dev vue-loader vue-template-compiler

修改webpack配置。

先导入插件：

import  {VueLoaderPlugin} from 'vue-loader’;

设置规则：

{
      test: /\.vue$/,
      loader: 'vue-loader'
}

增加插件：

  plugins: [
    // ….
    new  VueLoaderPlugin()
  ],

然后修改index.html，

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>webpack-vue</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="app">
  </div>
</body>

</html>

修改app.js

import Vue from 'vue';
import '../css/main.css';
import App from '../App.vue';

new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>'
});

增加src/App.vue

<template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
export default {
    name: 'app',
    data() {
        return {
            msg: 'hello'
        }
    }
}
</script>

npm run dev，可以看到效果。

5)局部刷新

修改webpack配置。

先到入webpack：

import webpack from 'webpack’;

然后增加插件：

  plugins: [
    //...
    new webpack.HotModuleReplacementPlugin()
  ],

最后修改package.json中的运行脚本：

"dev": "webpack-dev-server  --hot-only —open"

6）生产环境下的配置

总结

最后总结一下要安装的：

npm install webpack webpack-cli babel-loader babel-core babel-preset-env eslint css-loader style-loader webpack-dev-server vue-loader vue-template-compiler html-webpack-plugin --save-dev

还有npm install vue —save

(要使用element-ui，还要装element-ui、file-loader, url-loader、babel-plugin-component)