vue中webpack的部分安装

vue

简介

四个核心概念:

1. 入口
2. 输出
3. loaders (加载器)
4. plugins (插件)

webpack基本使用

webpack官方有两种用法:

1. 终端使用(需要全局安装webpack)
2. Node.js的配置文件(可以全局安装也可以在项目中安装)

以下是终端使用的方式, 学习阶段可以尝试一下:

1. 全局安装webpack(不推荐)
   npm i webpack webpack-cli -g
2. 调用webpack指令打包编译js文件
   在webpack4中必须通过-o手动指定output
   webpack后第一个参数是入口文件(要打包的文件)
   -o 表示output, 即输出文件
   -d 表示development, 即开发模式, 不压缩混淆
   -p 表示production, 即生产模式, 开启压缩混淆
   如果不指定-d或-p, 则默认使用 -p 开启压缩混淆并在控制台给出警告提示
   webpack ./src/main.js -o ./dist/bundle.js -d

注意: 在控制台中使用webpack不是其官方推荐的方法, 所以可以不需要全局安装webpack, 学习阶段使用一下即可

以下是配置文件的使用方式:

此方式不需要全局安装webpack, 但是需要在每个项目中的开发依赖安装webpack和webpack-cli

1. 安装webpack和webpack-cli
   npm i webpack webpack-cli -D

2. 在项目根目录下新建webpack.config.js的配置文件, 进行基本配置(入口和输出)
   const path = require(‘path’);
   module.exports = {
   entry: ‘./src/main.js’, // entry是指定打包文件的入口, 可以使用相对路径
   output: {
   path: path.join(__dirname, ‘dist’), // output是指输出的目录, 必须是绝对路径
   filename: ‘bundle.js’
   },
   mode: ‘development’
   }

3. 在package.json中的scripts节点下, 可以编写一些项目中用的脚本, 在这个地方可以执行项目依赖的指令, 不需要全局安装, 只需要本地安装即可

   “scripts”: {
   “test”: “echo “Error: no test specified” && exit 1”,
   “build”: “webpack”
   },

4. 当配置好scripts之后, 就可以运行npm run build进行项目打包了
   npm run build

webpack-dev-ser