webpack构建vue项目深入

准备工作

• 新建文件夹
• npm init`
• 创建文件夹和文件

- [app](#app)
  - [css](#css)
    - [reset.css](#resetcss)
  - [js](#js)
    - [home](#home)
    - [router](#router)
    - [app.vue](#appvue)
    - [main.js](#mainjs)
  - [view](#view)
    - [index.html](#indexhtml)
- [package.json](#packagejson)

配置webpack.config.js

const path = require('path')

module.exports = {
  entry: {
    app: './app/js/main.js'
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|svg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 1024,
            filename: '[name].[ext]'
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [],
  output: {
    filename: '[name].min.js',
    path: path.join(__dirname, 'dist')
  }
}

安装loader：

npm i -D webpack vue-loader html-loader style-loader css-loader url-loader file-loader sass-loader

安装devserver

config.js添加代码

devServer: {
    contentBase: path.join(__dirname, "dist"),
    // 如果需要提供静态文件在dist输出
    compress: true,
    // 服务开启压缩
    port: 9000
    // 服务占用端口
  },

安装：npm i webpack-dev-server

增加命令行脚本：

"build": "webpack --mode=production --config webpack.config.js",
"dev": "webpack-dev-server --mode=production --config webpack.config.js"

这时候run dev会提示错误如下：

Cannot find module 'webpack-cli/bin/config-yargs'

所以： npm i webpack-cli.

这时候你会发现服务可以启动了，但是页面显示：Cannot GET /。
这是什么原因呢？

配置router：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../home/index.vue'

Vue.use(Router)

export default new Router({
  routers: [
    {
      prth: '/',
      name: 'home',
      component: Home
    }
  ]
})

配置入口文件

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

Vue.config.productionTip = false

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

写入App.vue 的内容，很简单：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {

  }
</script>

<style scoped>

</style>

这里有一个很重要的内容。模板：