一个从0到1的webpack打包vue基础教程

vue-webpack-101

使用webpack4 从0到1构建一个vue 单页项目

vue webpack 项目初始化

初始化

1. mkdir vue-webpack-101
2. cd vue-webpack-101
3. npm init （都懂 就不介绍了）
4. touch .gitignore （都懂 就不介绍了）

装包

• Yarn add webpack vue vue-loader 根据包与包之间的依赖关系提示 继续安装其他包 这里就不一一列出，后面会给完整的package.json，前期只需要 webpack vue vue-loader 这三个相关包就可以跑起来一个示例demo。

• 配置 script

"scripts": {
    "build": "webpack --config webpack.config.js"
}
复制代码

为什么要在这里面调用webpack而不是在终端里面直接运行呢？因为只有在这里调用webpack，它才会优先调用我们项目里面安装的webpack版本，如果我们在命令行里面输入webpack，它会调动全局的webpack，这个时候全局的webpack可能会跟我们项目中的webpack版本不一致，所以我们还是采取这种方式比较稳妥。

目录

• vue-webpack-101
  • src
    • app.vue
    • index.js (入口文件)
  • package.json
  • .gitignore
  • node_modules

构建

app.vue

<template>
  <div id="test">{{test}}</div>
</template>

<script>
export default {
  data() {
    return {
      text: 'abc',
    }
  }
}
</script>

<style>
 #test {
   color: brown;
 }
</style>
复制代码

index.js (入口文件)

import Vue from "vue";
import App from "./app.vue";

const root = document.createElement('div');
document.body.appendChild(root);

new Vue({
  render: (h) => h(App)
}).$mount(root)
复制代码

webpack.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');  //*1 这里

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin() //*1 这里
  ]
}
复制代码

一步一步的解决报错

错误1

1 引入VueLoaderPlugin解决了问题如图

vue-loader

错误2

webpack.config.js 添加如下规则

// this will apply to both plain .css files
// AND <style> blocks in vue files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
复制代码

warning 1

webpack.config.js

entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  mode: 'development',
复制代码

至此，npm run build 终于跑起来了

结果图

配置开发环境运行项目

安装依赖

npm install --save-dev webpack-dev-server
复制代码

配置 webpack.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  resolve: {
    extensions: [".js", ".json", ".css", '.vue']
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain .js files
      // AND <script> blocks in vue files
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // this will apply to both plain .css files
      // AND <style> blocks in vue files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'index.html'), // 模板文件
      inject: 'body' // js的script注入到body底部
    })
  ]
}
复制代码

配置script

"scripts": {
    "dev": "webpack-dev-server --config webpack.config.js"
  }
复制代码

执行npm run dev

完结散花

github.com/wuweijia/vu…

TODO

• [ ] 资源优化