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 文件里的 

在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