stylus vue 报错_带你玩转webpack 从零构建Vue工程

从零搭建Vue开发环境：webpack4 + vue-loader + koa2 + babel-loader v8 + Babel v7 + eslint + git hooks + editorconfig从2009到2019社会在不断进步技术也在不断进步我们当然也不能落后“不积跬步无以至千里，不积小流无以成江海”先开始webpack基本构建创建一个工程目录 vue-struct...

weixin_39662721

87人浏览 · 2020-11-25 03:17:45

weixin_39662721 · 2020-11-25 03:17:45 发布

从零搭建Vue开发环境：webpack4 + vue-loader + koa2 + babel-loader v8 + Babel v7 + eslint + git hooks + editorconfig

从2009到2019社会在不断进步技术也在不断进步我们当然也不能落后

“不积跬步无以至千里，不积小流无以成江海”

先开始webpack基本构建

创建一个工程目录 vue-structure

mkdir vue-structure && cd vue-structure

安装webpack

npm i webpack webpack-cli -D

创建build目录

mkdir build

在build目录里, 创建webpack.config.js

cd build && touch webpack.config.js

创建入口文件 src/main.js

mkdir src

cd src && touch main.js

main.js

alert('hello world!')

配置npm scripts

// package.json 
  "scripts": {
    "build": "webpack --config build/webpack.config.js --progress --mode production"
  }

配置devServer

npm i webpack-dev-server -D

配置npm scripts

"scripts": {
    ...
    "dev": "webpack-dev-server --config build/webpack.config.js --progress --mode development"
  }

html 插件

npm i html-webpack-plugin -D

webpack配置

// build/webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const resolve = dir => path.join(__dirname, '..', dir)

module.exports = {
  entry: resolve('src/main.js'),
  output: {
    filename: '[name].[hash:5].js',
    path: resolve('dist')
  },
  devServer: {
    host: '0.0.0.0',
    port: 7000,
    open: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: resolve('index.html')
    })
  ]
}

运行webpack dev server

npm run dev

浏览器自动打开 http://0.0.0.0:7000/

到这里webpack开发服务基本跑通了。

配置babel v7

webpack 4.x | babel-loader 8.x | babel 7.x

npm i -D babel-loader @babel/core @babel/preset-env

babel plugin

支持动态import()

npm i @babel/plugin-syntax-dynamic-import -D

配置webpack.config.js

module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }

创建.babelrc文件

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ]
}

测试下ES6代码

test.js

 // src/test.js
  export default () => alert('hello vue!')

index.html

// src/index.html
  <body>
    <div id="app">请说saydiv>
  body>

main.js

// src/main.js
 document.querySelector('#app').addEventListener('click', () => {
  import('./test.js').then(res => {
    res.default()
  })
})

运行下dev

npm run dev

点击页面div

ok 没问题。

配置Vue Loader

Vue Loader 是什么？

Vue Loader 是一个 webpack 的 loader，它允许你以一种以单文件组件(*.vue文件) 的格式撰写 Vue 组件

创建App.vue根组件

<template>
  <div class="example">{{ msg }}div>
template>

<script>export default {
  data () {return {msg: 'Hello Vue!'
    }
  }
}script>

<style>.example {color: red;
}style>

安装Vue

npm i vue

src/main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

修改index.html

<body>
  <div id="app">div>
body>

运行dev

npm run dev

结果报错了。

webpack默认只能识别JavaScript文件，不能解析.vue文件(vue单文件组件是Vue独有的)，于是作者提供了vue-loader。

Vue单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html

配置vue-loader

npm i vue-loader vue-template-compiler

vue-template-compiler (peer dependency) 是vue-loader的同版本依赖

webpack.config.js

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

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

vue单文件组件中css 也需要css-loader解析

npm i css-loader -D

配置webpack

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `