webpack4详细入门教程 $ npm install webpack webpack-cli webpack-dev-server -g
$ cd webpack-course
$ npm install
$ npm run build $ npm install webpack webpack-cli webpack-dev-server -g $ cd Desktop/
$ mkdir webpack-course mkdir 创建一个文件夹
$ cd webpack-course
$ mkdir src
$ mkdir dist
$ mkdir config
$ ls 查看文件列表（有多少个 文件、文件夹） $ git init . 初始化一个空的本地仓库（Git），便于后器对代码的管理
$ npm init -y 创建一个package.json文件 $ echo >dist/index.html Ctrl + c 进入dist文件夹并创建一个文件为index.html $ echo >src/index.js Ctrl + c $ ls src/ 查看src下的文件 列表 $ ls dist/ $ code . 命令行方式打开vscode $ webpack --mode=development 开发环境 $ webpack --mode=production 生产环境，非常小，只会打包用到的东西 $ cls 清空终端历史的 命令行 $ echo >config/webpack.dev.js 创建一个配置文件 $ rm dist/main.js 删除dist下的main.js文件 $ rm src/index.js 删除src下的index.js文件 const path = require("path");
module.exports = {
// 入口：有并且可以有多个
entry: {
main:"./src/main.js"
},
// 打包环境：开发 & 生产
mode:"",
// 出口：有且只能有一个
output:{
filename: "[name]-bundle.js", // main-bound.js
path: path.resolve(__dirname, "../dist")
}
} $ echo >src/main.js 创建一个入口文件 $ webpack --config=config/webpack.dev.js 报错
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.mode should be one of these:
"development" | "production" | "none"
-> Enable production optimizations or development hints. const path = require("path");
module.exports = {
// 入口：有并且可以有多个
entry: {
main:"./src/main.js"
},
// 打包环境：开发 & 生产
mode:"development",
// 出口：有且只能有一个
output:{
filename: "[name]-bundle.js", // main-bound.js
path: path.resolve(__dirname, "../dist")
}
} <body>
<h1>Hello World!</h1>
</body> alert("Hello World!"); const path = require("path");
module.exports = {
// 入口：有并且可以有多个
entry: {
main:"./src/main.js"
},
// 打包环境：开发 & 生产
mode:"development",
// 出口：有且只能有一个
output:{
filename: "[name]-bundle.js", // main-bound.js
path: path.resolve(__dirname, "../dist"),
publicPath:"/" // 如果“/”，在index.html文件中引入main-bundle.js。这么写：<script src="/main-bundle.js"></script> 。 如果写的是：“/js”，在index.html文件中引入main-bundle.js。这么写：<script src="/js/main-bundle.js"></script>
}
} <body>
<h1>Hello World!</h1>
<script src="/main-bundle.js"></script>
</body> $ npm install webpack webpack-cli webpack-dev-server 回车 $ webpack-dev-server --config=config/webpack.dev.js 
const path = require("path");
module.exports = {
// 入口：有并且可以有多个
entry: {
main:"./src/main.js"
},
// 打包环境：开发 & 生产
mode:"development",
// 出口：有且只能有一个
output:{
filename: "[name]-bundle.js", // main-bound.js
path: path.resolve(__dirname, "../dist"),
publicPath:"/" // 如果“/”，在index.html文件中引入main-bundle.js。这么写：<script src="/main-bundle.js"></script> 。 如果写的是：“/js”，在index.html文件中引入main-bundle.js。这么写：<script src="/js/main-bundle.js"></script>
},
// 本地服务器
devServer:{
contentBase:"dist" // 服务器 默认进入dist文件夹下
}
}
$ webpack-dev-server --config=config/webpack.dev.js
alert("Hello World!！！！！！！！！！！");浏览器实现了，自动刷新功能！