使用webpack搭建一个vue-cli

最新推荐文章于 2024-06-10 15:05:54 发布

luckybing~

最新推荐文章于 2024-06-10 15:05:54 发布

阅读量683

点赞数

分类专栏： webpack实战读书

本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/106580240

版权

webpack实战读书专栏收录该内容

39 篇文章 0 订阅

订阅专栏

（一）vue-cli的工作原理

本质是一个下载器，官方叫做启动器，帮助我们快速建立一个基本项目，根据你的选择建立起一个基本的框架。

最重要的是各种loader，浏览器不认识Vue，各种各样的loader将webpack不认识的文件转成认识的文件，比如js

plugin: 插件，扩展功能

主要是webpack，webpack熟练的话就可以自己搭建一个vue-cli

（二）使用webpack搭建vue-cli

（1）新建文件夹初始化

npm init -y

（2）安装webpack、webpack-cli

npm i webpack webpack-cli --save

（3）创建index.html，在根目录下

创建一个div，id 是 app

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue-cli</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

（4）根目录下创建 main.js

main.js 主要做两件事

1）创建vue根实例

需要下载vue

npm i vue --save

2）挂载App组件

代码：

// 创建vue根实例
import Vue from 'vue'
// 引入App组件
import App from './App.vue'
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>' // 挂载App组件
})

（5）webapck配置（webpack.config.js）

下载的插件：vue-loader、vue-template-compiler（模板编译）、css-loader、babel-loader、@babel/core、file-loader、vue-style-loader、url-loader、style-loader、sass-loader、node-sass、html-webpack-plugin、clean-webpack-plugin、postcss-loader、autoprefixer、webpack-dev-server、webpack-merge、@babel/preset-env

备注:

1）安装 vue-template-compiler 的时候，会提示手动需要安装下css-loader

2）postcss-loader：自动加浏览器样式前缀，要写在 css-loader的后面，先加前缀，在解析css

3）source-map 的作用：建立打包后的文件与源代码所在行的映射

代码：

App.vue

<template>
  <div>
    <div class="title">this is app</div>
  </div>
</template>

<script>
import logo from './src/assets/img/logo.png'
import './index.css'
export default {
  created () {
    console.log(logo)
    const result = [1, 2].map((item) => {
      return item + 1
    })
    console.log(result)
  }
}
</script>

<style scoped lang="scss">
.title {
  color: red;
}
</style>

index.css:

div {
  border: 1px solid red;
  transform: translate(50%);
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue-cli</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

index.js:

// 创建vue根实例
import Vue from 'vue'
// 引入App组件
import App from './App.vue'
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>' // 挂载App组件
})

webpack.config.js:

const path = require('path')
const vueLoaderPlugin = require('vue-loader/lib/plugin') // 这个路径下的插件
const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
  devtool: 'source-map', // source-map
  mode: 'development',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader'
    }, {
      test: /\.js$/,
      loader: 'babel-loader',  // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      exclude: /node_modules/
    }, {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            // 开启 CSS Modules
            modules: true
          }
        },
        'postcss-loader'
      ] // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
    }, {
      test: /\.(png|gif|jpg|jpeg|svg)$/,
      use: [{
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'image'
        }
      }]
    }, {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
    }]
  },
  plugins: [
    new vueLoaderPlugin(),
    new htmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin() // 热更新
  ],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  },
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8080,
    compress: true,
    hot: true // 开启热模块更新
  }
}

postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

.babelrc:

{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ]
}

package.json:

{
  "name": "vue-CLI",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.12.3",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.0",
    "file-loader": "^6.1.1",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.4",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.2.0",
    "webpack-cli": "^4.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^8.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.0",
    "postcss-loader": "^4.0.4",
    "webpack-dev-server": "^2.11.5"
  }
}

还有区分环境打包，分成两个文件（webpack.prod.js、webpack.dev.js）,然后提取公共代码（webpack.common.js，使用wepack-merge插件）等，就先不处理了，以上就搭建完啦~

luckybing~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用webpack搭建一个vue-cli

（一）vue-cli的工作原理本质是一个下载器，官方叫做启动器，帮助我们快速建立一个基本项目，根据你的选择建立起一个基本的框架。最重要的是各种loader，浏览器不认识Vue，各种各样的loader将webpack不认识的文件转成认识的文件，比如jsplugin: 插件，扩展功能主要是webpack，webpack熟练的话就可以自己搭建一个vue-cli（二）...
复制链接

扫一扫

专栏目录