用webpack 构建自己的vue-cli

步骤1 :新建文件夹 my-vue-cli

步骤2: 在文件夹中输入npm init (拥有npm管理环境),之后可以安装我们所需要的包

步骤3:安装 webpack、webpack-cli (webpack打包工具,webpack 执行依赖webpack-cli)

npm i webpack webpack-cli -D

步骤4:在跟目录下新建src(放项目主要代码)、public(放公用静态资源)

public/index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>my-vue-cli</title>

</head>

<body>

  <div id="app"></div>

</body>

</html>

src/main.js

import { add } from './tools/add.js'
console.log(add(1, 2))
console.log('我是main.js')

src/tools/add.js

export const add = (a, b) => {
  return a + b
}

步骤5:入口文件(webpack打包需要从入口文件开始查找,一直到打包所有引用文件)

进行入口文件的配置,在根目录下新建webpack.config.js

const path = require('path')

module.exports = {
  // 模式 开发模式
  mode: 'development',
  // 入口文件 main.js
  entry: {
    main: './src/main.js'
  },
  // 输出
  output: {
    // 输出到 dist文件夹
    path: path.resolve(__dirname, './dist'),
    // js文件下
    filename: 'js/chunk-[contenthash].js',
    // 每次打包前自动清除旧的dist
    clean: true,
  }
}

步骤6:配置打包命令

package.json

"scripts": {
    "build": "webpack"
},

此刻,运行命令 npm run build,就能发现打包成功 出现dist/js/chunk-c3454564....,接着我们需要在index.html文件中 引入打包出来的js ,并且可以打包html 文件才可以。

步骤7:如何打包html

打包html需要用到html-webpack-plugin插件, npm i html-webpack-plugin -D。需要在webpack.config.js 中配置

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

module.exports = {
  // 刚刚的代码...
  
  // 插件都放 plugins 中
  plugins: [
    new HtmlWebpackPlugin({
      // 选择模板 public/index.html
      template: './public/index.html',
      // 打包后的名字
      filename: 'index.html',
      // js文件插入 body里
      inject: 'body',
    }),
  ]
}

此刻在运行npm run build可以看到html被打包,且打包后的html 自动引入了打包后的js 文件

步骤8:打包CSS

在src 文件夹下创建styles 文件夹,用来存放样式 src/styles/index.scss,在 入口文件main.js中引入 import './styles/index.scss'

需要安装 sass、sass-loader:可以将scss代码转换成css css-loader 使webpack具有打包css的能力 sass-resources-loader 可选 支持打包全局公共scss 文件 mini-css-extract-plugin:可将css代码打包成一个单独的css文件

npm i

sass

sass-loader

sass-resources-loader

mini-css-extract-plugin

-D

配置webpack.config.js

// 刚才的代码...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  // 刚才的代码...
  plugins: [
    // 刚才的代码...
    new MiniCssExtractPlugin({
      // 将css代码输出到dist/styles文件夹下
      filename: 'styles/chunk-[contenthash].css',
      ignoreOrder: true,
    }),
  ],
  module: {
    rules: [
      {
        // 匹配文件后缀的规则
        test: /\.(css|s[cs]ss)$/,
        use: [
          // loader执行顺序是从右到左
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
          // {
          //   loader: 'sass-resources-loader',
          //   options: {
          //     resources: [
          //       // 放置全局引入的公共scss文件
          //     ],
          //   },
          // },
        ],
      },
    ]
  }
}

此时打包,可以看到index.html 文件引入了css 打包图片用asset-module

此时我们完成了打包html、css、 js 和图片 下篇文章继续介绍 babel(将高级语法转换成低级语法,兼容一些低版本的浏览器) 打包vue 热启动 环境区分 构建打包进度条 以及source-map(快速定位代码出错位置)等内容

相关推荐
Dragon Wu11 分钟前
Taro React小程序开发框架 总结
前端·react.js·前端框架·taro
nbsaas-boot37 分钟前
消息队列场景下的前端设计:如何优化用户体验
前端·ux
sususugaa40 分钟前
前端框架Vue3——响应式数据,v-on,v-show和v-if,v-for,v-bind
开发语言·前端·vue.js·前端框架
欧阳码农1 小时前
看不懂来打我!Vue3的watch是如何实现数据监听的
vue.js·源码·源码阅读
珹洺2 小时前
从 HTML 到 CSS:开启网页样式之旅(三)—— CSS 三大特性与 CSS 常用属性
前端·javascript·css·网络·html·tensorflow·html5
T^T尚6 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志7 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3927 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
山猪打不过家猪7 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山7 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js