webpack.config.js

webpack

1. 安装：
2. 找webpack.config.js文件
3. 解析文件 , 获得配置对象
4. 根据配置对象进行打包构建
5. webpack -w自动监听文件更改，避免修改后重复输入webpack指令

---

webpack-dev-server

1. 安装

   1. npm i webpack -D
   2. npm i webpack-cli -D
   3. npm i webpack-dev-server -D
   4. 注意：webpack-dev-server依赖于webpack,并且强制要求项目本地安装webpack和 webpack-cli

2. 使用：

   1. cmd键入 webpack-dev-server

   2. 推荐方式：npm脚本中"dev": "webpack-dev-server --open --port 3000 --hot --contentBase 目录"

   3. 测试只有open和port管用，热重载失败。
   4. https://blog.csdn.net/hsl0530hsl/article/details/78419693

3. 常见报错

   1. webpack-dev-server不是内部或外部命令，也不是可运行的程序
      原因 : cmd只能直接执行全局-g安装的 , 无法直接运行项目-D安装的 , 所以无法把它当作脚本命令。
      解决方法：使用npm脚本运行
   2. code ENOSELF
      解决方法：把package.json中的"name": "webpack"值随便改一下
   3. 如果还不行，删node_modules重来
   4. 热重载失效
      1. webpack-dev-server并不能读取你的webpack.config.js的配置output。你在webpack.config.js里面的配置output属性是你用webpack打包时候才起作用的，对webpack-dev-server并不起作用
      2. webpack-dev-server打包生产的文件不出现在项目目录中，它默认打包的文件名是bundle.js，在电脑内存中存储，默认地址为项目根目录，你可以在http://localhost:3000/bundle.js尝试查看

4. 注意事项

   1. webpack-dev-server会自动将打包好的文件并没有放在实际的物理磁盘中 , 而是直接托管到了电脑内存中，所以在根目录看不见对应的文件。可以认为以一种虚拟的形式托管在根目录中
   2. 由于打包后的文件托管在根目录下,引用时scr直接写根目录下对应的xxx.js
   3. 原因：磁盘速度没有内存快，不用每次重新请求磁盘文件，减少http请求次数
   4. 工作中，我们更推荐在npm脚本中直接书写

// 热重载第一步
	const webpack = require('webpack');
	devServer: {
		// 端口号
		port: 9000,
		// 自动打开
		open: true,
		// 指定托管的根目录
		contentBase:'src',
		// 热重载第二步
		hot: true,
	},
	plugins:[
		// 热重载第三步
	    new webpack.HotModuleReplacementPlugin(),
	  ]

---

webpack.config.js

	const path = require('path');
	
	module.exports = {
	  entry: './src/main.js',
	  output: {
	    filename: 'js/main.js',
	    path: path.resolve(__dirname, 'dist')
	  },
	  mode: 'development'
	}

1. entry&output

	// 单页面
	entry: '/src/index.js',
	output: {
		filename: 'js/bundle_[hash:6].js',
		path: path.resolve(__dirname, 'dist'),  //磁盘路径
	}
	// 多页面
	entry: {
	   key: value, // key为入口文件名，value为入口文件路径
	   key: value,
	},
	output: {
	   filename: 'js/[name]_[hash:6].js',
	   path: path.resolve(__dirname, 'dist')
	}

2. module转化器

  module: {
    rules: [
        { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 这两个顺序颠倒报错
        { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }

3. devServer前端服务器配置

	devServer:{
	  open:true, // 自动打开浏览器
	  port:3000, // 端口号
	  hot:true, // 热重载
	  contentBase:'src' // 
    }

4. resolve文件拓展名省略

	resolve: {
      extensions: ['.js', '.css', 'vue']
    }

webpack之优雅降级

1. 安装
   1. npm i [email protected] @bable/core @bable/preset-env -D