[转]VUE 之 Webpack 打包构建

首先，下载 jquery 

npm i jquery -S

然后，下载 webpack 

npm i webpack webpack-cli -D

接下来，创建文件：webpack.config.js

module.exports = {
    mode: 'development' // 分 development \ production 两种模式
}

然后修改 package.json，在 scripts 中添加属性 dev

  "scripts": {
    "dev": "webpack"
  },

这里注意， package.json 里面不需要添加 "type":"module" ，加了会在打包时报错

最后，在终端敲命令：

npm run dev

 开发环境中，使用 dev 命令，如果要项目发布，就要修改 package.json

  "scripts": {
    "dev": "webpack serve", // 开发环境中，运行 dev 命令
    "build": "webpack --mode production" // 项目发布时，运行 build 命令
  },

打包构建成功后，会在项目同目录下生成一个 dist 文件夹，里面是打包好的 .js 文件，修改 .html 内容，改成引用这个打包后的 .js 文件即可。

 

 

const path = require('path')

module.exports = {
    mode: 'development', // development \ production
    // 指定打包的入口
    entry: path.join(__dirname, './src/index.js'),
    // 指定打包的出口
    output: {
        // 表示输出文件的存放路径
        path: path.join(__dirname, './dist'),
        // 表示输出文件的名称
        filename: 'bundle.js'
    }
}