webpack 搭建Vue环境

前面的话

这篇文章将介绍如何使用webpack搭建Vue环境

初始化项目

先创建一个根目录：基于webpack搭建Vue环境（这里便于查找中文命名）

在根目录下，命令行中敲入如下命令：

 npm init - y

会生成一个 包含默认信息的 package.json 文件 。

然后我们在项目文件夹中创建以下几个文件夹：

• dist
• src、src/components
• build

其中，dist 用于存放 Webpack 打包后的项目文件、src 用于存放你的源代码文件、build 用于存放 Webpack 打包相关的配置文件。

在 src 下，创建入口文件 index.js。

在根目录下创建 index.html 文件，内容如下：

这将用于作为我们应用的模板，打包的 js 文件会在 Webpack 插件的处理下插入到这个文件中。

安装webpack

在命令行输入：

npm install  webpack webpack-cli -D

然后你就可以看到你的项目文件夹中多了一个 node_modules 文件夹，然后 package.json 文件中多了一个 devDependencies 属性。里面包含了安装的依赖名称和依赖版本，现在暂时还只有 webpack 和 webpack-cli。

配置最基本的 Webpack

这一节我们将着手配置一个具有最基本打包功能的项目，从 src/index.js 开始对项目进行打包。

为了项目结构更加科学合理，我们把所有的 Webpack 配置相关的文件都存放在了 build 目录中。

进入 build 文件夹，然后创建以下几个文件：

• webpack.base.conf.js
• webpack.dev.conf.js
• webpack.prod.conf.js
• build.js

其中，webpack.base.conf.js 是最基础的打包配置，是开发环境和生产环境都要用到的配置。webpack.dev.conf.js 就是在开发环境要使用的配置。webpack.prod.conf.js 就是在生产环境要使用的配置了。build.js 是通过 Node 接口进行打包的脚本。

接下来我们在对应的文件中写入最基本的配置信息。

[webpack.base.conf.js]

先写最基本的配置信息：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    bundle: path.resolve(__dirname, '../src/index.js')
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].js'
  },
  module: {
    rules: [
      
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../index.html')
    })
  ]
};
 

[webpack.dev.conf.js]

同样写入最基本的配置信息：

const merge = require('webpack-merge');
const path = require('path');
const baseConfig = require('./webpack.base.conf');
module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, '../dist'),
    open: true
  }
});

[webpack.prod.conf.js]

const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const baseConfig = require('./webpack.base.conf');
module.exports = merge(baseConfig, {
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: []
  },
  plugins: [
   /* new CleanWebpackPlugin(['dist/'], {
      root: path.resolve(__dirname, '../'),
      verbose: true,
      dry: false
      */
    })
  ]
});

注意到我们上面引用了两个新的依赖，需要先进行安装才能使用：

cnpm install webpack-merge clean-webpack-plugin webpack-dev-server html-webpack-plugin -D

[build.js]

这个脚本用于构建生产环境，开发环境基于 webpack-dev-server 搭建，不写脚本。

接下来，写入我们的打包脚本，通过 Node 调用 Webpack 进行打包。

const webpack = require('webpack');
const config = require('./webpack.prod.conf');
 
webpack(config, (err, stats) => {
  if (err || stats.hasErrors()) {
    // 在这里处理错误
    console.error(err);
    return;
  }
  // 处理完成
  console.log(stats.toString({
    chunks: false,  // 使构建过程更静默无输出
    colors: true    // 在控制台展示颜色
  }));
});

[npm scripts]

配置 npm scripts 能够使我们更方便的使用打包命令。

在 package.json 文件的 scripts 属性中，写入如下两条：

基本的配置写完了，我们测试一下打包效果，在 src/index.js 中写入如下代码：

console.log('index.js!');

然后在命令行中输入：

npm run dev

在自动打开的网页中，我打开控制台，我们可以看到输出了一句“index.js”，符合预期。

然后输入构建命令进行构建：

npm run build

在dist目录下生成两个打包文件：说明打包成功

但是我们还只完成了最基本的打包功能，Vue 还不能使用，接下来我们将这个项目变得更加强大。

引入一些基础的 Loader（加载器）

为了方便开发，我们需要引入一些 Loader，以简化我们的写法以及使我们的代码兼容更多的环境。

[babel-loader]

为了使我们的 JavaScript 代码兼容更多环境，我们需要使用 babel-loader。

配置方法：

首先安装 babel-loader、babel-preset-env 和 babel-core。

安装命令如下：

npm install babel-loader@7 babel-core babel-preset-env -D

然后在 webpack.base.conf.js 的 module.rules 中新增如下对象：

我们还需要添加一个配置文件（.babelrc）在根目录下：

这就是 babel-preset-env 的作用，帮助我们配置 babel。我们只需要告诉它我们要兼容的情况（目标运行环境），它就会自动把代码转换为兼容对应环境的代码。

以上代码表示我们要求代码兼容最新两个版本的浏览器，不用兼容 IE 8，另外市场份额超过 1% 的浏览器也必须支持。

接下来我们试一试，把 src/index.js 中的代码改写为：

const x = 'index.js';
 
const y = (x) => {
  console.log(x);
}
 
y(x);

然后使用 npm run build 进行打包，打包之后的代码中：

var x = 'index.js';
 
var y = function y(x) {
  console.log(x);
};
 
y(x);

说明我们的代码已经被成功地转换了。

为了做一个对比，未配置 babel 时，转换结果如下：

const x = 'index.js';
 
const y = (x) => {
  console.log(x);
}
 
y(x);

[file-loader]

这个用于将字体文件、图片文件进行模块化。

首先安装 file-loader：

npm install file-loader -D

然后在 webpack.base.conf.js 中添加如下配置到 module.rules：

接下来我们配置 vue-loader。

[vue-loader]

为了使用 Vue 单文件组件，我们需要对 .vue 文件进行处理，使用 vue-loader。

首先安装 vue-loader、css-loader、vue-style-loader 和 vue-template-compiler，后者也是必不可少的，少了会报错。

命令：

npm install vue-loader css-loader vue-style-loader vue-template-compiler -D

然后我们配置 webpack.base.conf.js，写入以下代码到该文件的 module.rules 属性当中：

只有这一处配置是不行的，根据 vue-loader 官网的说明，我们还需要配置一个插件，然后还需要配置 resolve.alias 别名，不然 Webpack 没法找到 Vue 模块。

配置插件，首先在文件头部引入：

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

然后在 plugins 数组中添加这个插件对象：

new VueLoaderPlugin(),

随后我们还要配置别名，将 resolve.alias 配置为如下对象：

{
  'vue$': 'vue/dist/vue.esm.js',
  '@': path.resolve(__dirname, '../src'),
}

这可以使得 Webpack 很方便的找到 Vue，我们在 JavaScript 文件中引入依赖的时候，也可以方便地使用 @ 来代替 src，省去了写文件路径的麻烦。

我们顺便添加一个 resolve.extensions 属性，方便我们引入依赖或者文件的时候可以 省略后缀：

extensions: ['*', '.js', '.json', '.vue'],

extensions 属性是一个数组。这样配置之后，我们在 JavaScript 文件中 import JavaScript 文件、json 文件和 Vue 单文件组件都可以省略后缀。

接下来我们验证一下 Vue 单文件组件是否可用。

安装 Vue：

npm install vue --save

然后修改 index.js 文件内容如下：

然后在同级目录下创建一个 App.vue 文件，内容如下：

运行命令 npm run dev 就可以看到一个大大的一级标题 —— Hello World 啦！

到这里，我们的项目已经可以使用 Vue 单文件组件进行开发了，但是还没有完，我们还有一些任务要做。

小结

如果在安装某依赖时，出现错误：

解决方法：

1.删除node_modules 文件夹、package-lock.json文件

2.重新运行：npm install

3.然后，运行：npm run dev

4.异常解决