webpack构建vue项目深入

最新推荐文章于 2024-06-24 22:30:34 发布

simoonQian

最新推荐文章于 2024-06-24 22:30:34 发布

阅读量342

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_40814356/article/details/80887980

版权

web前端专栏收录该内容

51 篇文章 2 订阅

订阅专栏

准备工作

新建文件夹
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>

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

npm run dev 报错：
Cannot find module ‘vue-template-compiler’
解决办法：

npm i vue-template-compiler

继续报错：
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
解决办法：

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

plugin配置：

plugins: [
    new VueLoaderPlugin()
  ],

仍然报错：
Can’t resolve ‘vue’
Can’t resolve ‘vue-router’

npm i vue  vue-loader

Can’t resolve ‘vue-router’

npm i vue-router

这时候服务器url可以打开，但是控制台报错如下：

Failed to load resource: the server responded with a status of 404 (Not Found)

解决办法如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './app/views/index.html'
    })
  ],

px转rem

css下面：
{
          loader: 'px2rem-loader',
          // options here
          options: {
            remUni: 75,
            remPrecision: 8
          }
        }

scss下面添加配置：

{
          loader: 'px2rem-loader',
          // options here
          options: {
            remUni: 75,
            remPrecision: 8
          }
        }

Css module的使用：

{
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[local]_[hash:base64:8]'
          }
        }

css Module 和scss的配合使用：

{
        test: /\.scss$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[local]_[hash:base64:8]'
          }
        }, {
          loader: 'px2rem-loader',
          // options here
          options: {
            remUni: 75,
            remPrecision: 8
          }
        }

simoonQian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack构建vue项目深入

准备工作新建文件夹npm init`创建文件夹和文件- [app](#app) - [css](#css) - [reset.css](#resetcss) - [js](#js) - [home](#home) - [router](#router) - [app.vue](#appvue) - [main.js](#mainjs)...
复制链接

扫一扫

专栏目录