webpack4.0基础（一）

开始学习webpack4.0

mkdir webpack-test # 创建项目文件夹
rmdir webpack-test # 删除文件夹
cd webpack-test # 进入项目文件夹
npm init # 初始化包管理器
npm init -y # 不一步步的询问配置项，直接生成一个默认的配置项
npm install webpack-cli --save-dev # 安装 webpack-cli (作用是使我们可以在命令行里运行 webpack)
npm uninstall webpack-cli --save-dev # 卸载 webpack-cli
npm install webpack --save # 安装 webpack
npm info webpack # 查看 webpack 的相关信息
npm install webpack@4.25.0 -S # 安装指定版本号的 webpack

webpack的安装

为了防止全局安装出现的版本冲突,我们真实项目开发的时候基本上以安装在本地项目中为主；

$ npm init -y

$ yarn add webpack webpack-cli -D
OR
$ npm i webpack webpack-cli --save-dev

webpack的基础使用

• 初步体验（零配置）

基础打包语法：
SRC:存储项目开发的源文件
DIST:打包后的文件目录

/*
 * 默认会打包SRC目录中的JS文件（入口默认index.js）
 * 打包完成的目录默认是DIST/MAIN.JS
 *
 * npx:http://www.ruanyifeng.com/blog/2019/02/npx.html
 * 默认执行node_modules/bin/webpack.cmd文件
 * webpack默认支持CommonJS和ES6 Module的模块规范，依此进行依赖打包
 */
$ npx webpack

$ npx webpack 基于npx执行了webpack命令，实现打包部署

也可以从package. json中配置可执行的脚本

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

$ npm run build OR $ yarn build

• 自定义基础配置
  webpack.config.js OR webpackfile.js

在这个文件中设置我们自定义的打包规则
1.所有的规则都写在module. exports={}中
let path = require('path');
module.exports = {
	//=>打包模式  开发环境development  生产环境production
	mode: 'production',
	//=>入口
	entry: './src/index.js',
	//=>输出
	output: {
		//=>输出文件的文件名
		filename: 'bundle.js',
		//=>输出目录的"绝对路径"
		path: path.resolve(__dirname, 'dist')
	}
}

• 自定义配置文件名

1. $ npx webpack --config webpack.config.development.js
2. 可在package.json中配置可执行的脚本命令（区分开发环境）

"scripts": {
    "serve": "webpack --config webpack.config.development.js",
    "build": "webpack --config webpack.config.production.js"
},

// webpack 的默认配置文件 webpack特点是基于nodejs 遵循commonjs规范的
// const path = require('path');
// const resolve = (...filename)=>{
//     return path.resolve(...filename)
// }
// module.exports = {
//     entry: resolve(__dirname,'..',"./src/main.js"), // 可以使用绝对路径 默认是当前src下的index
//     output:{
//         filename:'bundle.js', // 默认叫main.js
//         path: resolve(__dirname,'../','dist')// 必须是绝对路径
//     }   
// }

// 打包可能有很多需求 区分环境变量 开发的时候 不要压缩， 不要抽离css js 上线的时候 压缩 合并优化... 

// 分成三部分 1. 基础  2.开发环境  3.生产环境
// 指定开发目录 

// 1) 我可以都以base.js为入口，在base里区分 调用开发还是生产
// 2) 走开发配置的文件  走生产配置

webpack-dev-server

代码更改后，会自动重新编译，然后自动刷新页面

官网：https://webpack.js.org/configuration/dev-server/

安装：
$ yarn add webpack-dev-server -D
OR
npm i webpack-dev-server -D

基础配置：

/* webpack.config.js */
//=>配置DEV-SERVER
devServer: {
//=>端口
    port: 3000,
//=>显示编译进度
progress: true,
//=>指定访问资源目录
contentBase: './dist',
//=>自动打开浏览器
open: true
}

/* package.json */
"scripts": {
"serve": "webpack-dev-server --config webpack.config.development.js",
"build": "webpack --config webpack.config.development.js"
}

$ yarn build
OR
$ npm run serve
OR
$ npx webpack-dev-server