webpack
- 安装:
- 找webpack.config.js文件
- 解析文件 , 获得配置对象
- 根据配置对象进行打包构建
webpack -w
自动监听文件更改,避免修改后重复输入webpack
指令
webpack-dev-server
-
安装
npm i webpack -D
npm i webpack-cli -D
npm i webpack-dev-server -D
- 注意:
webpack-dev-server
依赖于webpack
,并且强制要求项目本地安装webpack
和webpack-cli
-
使用:
cmd
键入webpack-dev-server
-
推荐方式:
npm
脚本中"dev": "webpack-dev-server --open --port 3000 --hot --contentBase 目录"
- 测试只有open和port管用,热重载失败。
- https://blog.csdn.net/hsl0530hsl/article/details/78419693
-
常见报错
webpack-dev-server不是内部或外部命令,也不是可运行的程序
原因 : cmd只能直接执行全局-g安装的 , 无法直接运行项目-D安装的 , 所以无法把它当作脚本命令。
解决方法:使用npm
脚本运行code ENOSELF
解决方法:把package.json
中的"name": "webpack"
值随便改一下- 如果还不行,删
node_modules
重来 - 热重载失效
webpack-dev-server
并不能读取你的webpack.config.js
的配置output
。你在webpack.config.js
里面的配置output
属性是你用webpack
打包时候才起作用的,对webpack-dev-server
并不起作用webpack-dev-server
打包生产的文件不出现在项目目录中,它默认打包的文件名是bundle.js
,在电脑内存中存储,默认地址为项目根目录,你可以在http://localhost:3000/bundle.js
尝试查看
-
注意事项
webpack-dev-server
会自动将打包好的文件并没有放在实际的物理磁盘中 , 而是直接托管到了电脑内存中,所以在根目录看不见对应的文件。可以认为以一种虚拟的形式托管在根目录中- 由于打包后的文件托管在根目录下,引用时scr直接写根目录下对应的
xxx.js
- 原因:磁盘速度没有内存快,不用每次重新请求磁盘文件,减少http请求次数
- 工作中,我们更推荐在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'
}
// 单页面
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')
}
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 这两个顺序颠倒报错
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
devServer:{
open:true, // 自动打开浏览器
port:3000, // 端口号
hot:true, // 热重载
contentBase:'src' //
}
resolve: {
extensions: ['.js', '.css', 'vue']
}
webpack
之优雅降级
- 安装
npm i [email protected] @bable/core @bable/preset-env -D