vue入门——webpack配置

搭建vue需要了解webpack。

1. npm init。

新建一个webpack_demo的目录，在该目录使用此命令初始化一个package.json管理安装包。执行后会有一堆问题，默认回车即可，这样就在根目录得到一个package.json的文件，内容如下

{ "name": "webpack_demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

2. npm install webpack webpack-dev-server

使用该命令安装webpack和webpack服务器，执行完毕之后，在package.json中会增加webpack和webpack-dev-server依赖。webapck-dev-server会启动一个web服务器，并可以热加载。

"dependencies": { "webpack": "^5.70.0", "webpack-dev-server": "^4.7.4" }

3. index.html文件和main.js文件

在根目录新建index.html和main.js文件，index.html作为服务器入口，main.js作为webapck打包入口。

index.hmtl  
   
   

     Hello World 
   
 
    
  

4. webpack.config.js

在根目录新建一个webpack.config.js文件，并做如下配置。完成后运行 npm webpack serve就能启动服务器了。恭喜你，webpack环境已经搭建好了。

module.exports = { entry: './main.js', //webpack打包入口 devServer: { static: './' // webpack服务器访问入口 }, mode: 'development', // 开发模式 }

其实这里只需要配置devServer这个就可以让服务器启动了，但是entry和mode不配的话会有相应的报错，可以自行注释掉之后尝试。

在main.js中写入如下代码，保存后，可以看到浏览器内容直接变了，说明服务器热加载已经启用了。

document.getElementById('app').innerHTML = 'hello vue';

5. 安装babel

为了使用ES6语法，需要安装babel-loader，执行下面命令，可以直接安装babel对应的loader，必须babel-loader和@babel/core一起安装，才能保证版本相匹配。

npm install --save-dev babel-loader @babel/core

在webpack.config.js中配置babel-loader

{ module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['@babel/preset-env'] } } } ] } }

新建一个babel.config.json，里面写上，并运行命令 npm install @babel/preset-env –save-dev

babel.config.json { "presets": ["@babel/preset-env"] } 命令行 npm install @babel/preset-env --save-dev

这样就配置好babel-loader了。打开main.js写一段ES6代码

document.getElementById('app').innerHTML = 'hello vue'; let str = 'vue.js'; console.log(str);

保存后，可以看到控制台打印出vue.js证明babel-loader配置起效了。

6. 安装vue、vue-loader、vue-templare-compiler 

这里安装vue 2，对应vue-loader 15 ，对于vue-template-compiler 2。

npm install vue@2 vue-loader@15 vue-template-compiler@2 --save-dev

7.配置vue-loader

Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件：

const { VueLoaderPlugin } = require('vue-loader') module.exports = { ... module: { ... rules: [ { test: /\.vue$/, loader: 'vue-loader' } ], }, plugins: [ // 请确保引入这个插件！ new VueLoaderPlugin() ], }

这个插件是必须的！ 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的  块。 

8. 安装 css-loader、vue-style-loader

npm install css-loader vue-style-loader

到此vue的所有配置都安装完成了，写一段vue代码。

9. 运行vue代码

在mian.js中敲入下面代码

import Vue from 'vue'; let app = new Vue({ el: '#app', data: { message: 'vue.js', } }) console.log(app.message)

运行npm run dev，会发现报错了

这是因为在vue 2 中，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。可以看vue的package.json文件中，main字段

"main": "dist/vue.runtime.common.js",

而真正可以用的是vue.js文件，可以支持编译template。

这里我们有两种方法解决这个问题，一种是在导入时写明vue引用.

import Vue from 'vue/dist/vue.js';

一种是在webpack.config.js别名配置中配置vue别名

resolve: { // alias创建 import 或 require 的别名，来确保模块引入变得更简单 alias: { vue: 'vue/dist/vue.js', } },

修改完毕之后，再次运行npm run dev，就可以看到正常的页面了。

10. 编写.vue文件并运行

在根目录新建App.vue文件，敲入下面代码

在main.js里面修改代码

import Vue from 'vue'; import App from './App.vue'; let app = new Vue({ el: '#app', render: h => h(App), })

 运行npm run dev 可以看到.vue文件也正常运行了。

到此，vue 2的环境算是初步搭建完成了，后续有其他需求，继续配置安装即可。

最后，如果遇到包版本不匹配的情况，就在package.json里面看一下对应的依赖版本是多少，下载对应版本的包即可。比如vue2 对应vue-loader15-，vue3对应vue-loader16+等等。

参考网站：

babel: Babel 中文网 · Babel – 下一代 JavaScript 语法的编译器

webpack: 起步 | webpack 中文网  解析(resolve) | webpack 中文网

vue-loader: 起步 | Vue Loader