Vue-webpack入门使用（二）

1、项目结构：

项目结构

- dist：是将src里打包后的文件，用于发布
- src：是源码文件目录，里面的main.js是主程序入口

2、打包命令

a）webpack3和4的的打包命令是不一样的，webpack多了一个mode
b）webpack3打包命令：webpack ./src/main.js ./dist/bundle.js
c）webpack4打包命令：webpack ./src/main.js -o ./dist/bundle.js --mode=development
d）打包之后，在index.html里就不用导入所有的js文件，直接导入bundle.js就可以

3、默认配置打包

1）首先创建一个webpack.config.js文件，名称固定写法，不可更改

webpack.config.js

2）在webpack.config.js文件里，要导入一个node里的path包

const = path = require('path')

3）写入配置代码：

const path = require('path')
module.exports = {
    //entry指定入口文件
    entry:'./src/main.js',
    //output指定出口文件，path必须是绝对路径,要先导入一个path
    output:{
        path:'./dist',
        filename:'bundle.js'
    }
}

4）由于我们的项目目录里没有path，所以要先进行初始化：npm init，生成package.json文件

初始化

5）终端输入webpack --mode=development就可以默认配置打包了：

//改配置文件名称不可更改，固定写法，目的是优化打包
//这个path包是在node里的包里
const path = require('path')
module.exports = {
    //entry指定入口文件,可以添加多个入口，然后生成多个出口
    entry:{
        home:path.resolve(__dirname,'./src/main.js')
    },
    //output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
    output:{
        //node语法，__dirname获取当前文件的路径
        path:path.resolve(__dirname,'dist'),
        //这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
        filename:'[name].js'
    }
}

6）由于我们有生产环境和开发环境和测试环境，像第五步那种打包命令就不实用了，需要修改package.json数据：

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production"
  },
  "author": "",
  "license": "ISC"
}

7）修改package.json的scripts之后，就可以用npm命令打包命令：
- npm run dev 进行开发模式打包
- npm run build 进行生产模式打包
- npm run test 执行scripts里的test命令