webpack 之vue 初级打包1 从零开始-CSDN博客

摘要

vue本身提供了一个脚手架，vue-cli，直接就可以使用，一般不需要从零去构建一个webpack打包机制，但是作为一个前端开发，基础的还是需要了解和知道，万一和我一样不像用vue的打包配置呢？掌握基础的想怎弄就怎么弄，顺便在了解一下webpack的打包机制。

安装和检查

确保已经安装了node，webpack是依托node环境，并且使用npm管理，因此要确保安装了node，npm是集合在node里面一般不用单独安装，如果要升级就升级一下
检查安装

node -v
v12.12.0
npm -v 
6.11.3

如果没有安装就安装

项目初始化

新建一个项目目录，用来存放开发代码，打包代码等等
新建 vuepluginLearn 目录, （名字随便起）

初始化项目package.json

npm init -y

生成了package.json文件，可以打开看看。先放着，等会在用
安装 webpack vue

npm install webpack --save-dev

安装 vue

npm install vue

其他的安装用到的时候在安装

新建一个html

在更目录下新建一个index.html 文件。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>木子聊前端</title></title>
  <meta name="description" content="提供0到1到基础前端学习，实战层层深入,有问题咨询v:chinaynlmq">
  <meta name="keywords" content="前端,javascript,html5">
 </head>
 <body>
  <!-- --->
 </body> 
</html>

是一个空的，先不用，后面引入js在用

新建webpack配置文件

在根目录下新建 webpack.config.js

const path = require('path');  // node自带包
const webpack = require('webpack');
module.exports = {}

新建开发目录

在根目录下新家一个src目录
在src目录里面新建一个app.vue , 这个其实是一个模板
app.vue

<template>
  <div class="single">{{massage}}</div>
</template>
<script>
export default {
  data() {
    return {
      massage:'单文件打包'
    }
  },
  created() {
    
  },
  methods: {
    
  },
}
</script>
<style lang='less'>
  .single{
    color: red;
  }
</style>

在src 目录下新建 main.js

import Vue from 'vue';
import App from 'app.vue';

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

项目初始化工作已经基本昨完，但是还运行不起来，别慌，接下来我们填充webpack，让它运行起来

完善配置文件让项目运行起来

完善 webpack.config.js

配置输入输出路径

module.exports = {
  entry:'./src/main.js', // 打包的输入路径
  output: {
    path:path.resolve(__dirname,'./dist'),
    filename:'build.js'
  }
}

webpack 的原则一切皆模块而且只支持js模块，因此还要继续配置，把不是模块的进行模块，该转化的转化
css，less 的模块配置，需要先安装相关插件

npm install css-loader less-loader vue-style-loader --save-dev

样式配置 在module.rules 里面配置，这是一个数组

module:{
    rules:[{
      test: /\.css$/,
      use:['vue-style-loader','css-loader']
    },
    {
      test: /\.less$/,
      use:['vue-style-loader','css-loader','less-loader']
    }]
  }

意思是查找 .css 文件的后缀，然后用 vue-style-loader 解析，在用css-loader去解析，其他的原理一样

vue 模版配置
安装

npm i vue-loader vue-template-compiler --save-dev

这个有点特殊需要在和样式配置的基础上添加loader

    {
      test: /\.vue$/,
      loader:'vue-loader',
      options:{
        loaders: {
          'less': [
              'vue-style-loader',
              'css-loader',
              'less-loader'
          ]
       }
      }
    }

webpack配置基本完善了。不够的在添加

修改 package.json

修改scripts 告诉npm 运行时候该干嘛

"scripts": {
    "dev": "webpack --config webpack.config.js --progress",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

–config webpack.config.js --progress
可以不写。默认就是这个文件，这里是可配置webpack.config.js 路径的。意思是如果不在根目录下就需要配置，比如 src/webpack.config.js 比如我们放着src目录下吗就需要指明
运行一下

npm run dev

运行出错提示没有安装webpack-cli ，那就安装一下

npm install webpack-cli -D

在运行又报错
Module Error (from ./node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
不慌，来看一下意思是 vue-loader 没有被使用，确认一下是否在 webpack 的配置文件里面使用了，VueLoaderPlugin。
这个插件有点特殊来在完善一下webpack配置，同时补充resolve的配置
引入这个插件

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

然后

module:{
    // 上面的配置省略
  },
  plugins:[
    new VueLoaderPlugin()  
  ],
  resolve: {
    extensions: ['.vue', '.js', '.css', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'}
  }

添加这个插件进去。
在来 npm run dev
终于运行成功。看到更目录下存在了 dist/build.js 这个就是我们打包好的js

修改index.html

加入打包好的js

<div id="app"></div>
  <script src="./dist/build.js"></script>

浏览器运行 index.html 运行成功
后续继续补充其他优化，包括浏览器不支持es6语法的的问题