[webpack]搭建一个基本的webpack4项目(保姆级教程)
目录
- 创建项目目录,初始化项目
- 创建目录 创建文件
- 安装 webpack 和 webpack 脚手架 包
- 创建 webpack 配置文件
- 安装 webpack-dev-server
- 在
package.json
中配置scripts
- 安装 html-webpack-plugin 实现自动打开 index.html
- 配置
webpack.config.js
- 使用
npm run dev
运行
正文
重要
- 教程全文以webpack4.x最新版本为基,若不是webpack4切勿参考
1. 创建项目目录,初始化项目
- 创建一个项目文件夹 不要起名为
webpack
会冲突 - 在该文件夹下打开终端
npm init -y
- 根目录下会自动生成
package.json
文件
2. 创建目录 创建文件
- 在根目录创建文件夹
- src
- dist
- 在
src
中创建文件
- index.html
- index.js
- 注意:webpack 4.x 默认打包入口是 src -> index.js 默认输出文件是 dist -> main.js
3. 安装 webpack 和 webpack 脚手架 包
- 打开终端 使其处于项目根目录
npm i webpack -D
安装 webpacknpm i webpack-cli -D
安装 webpack脚手架
- 如果
npm
太慢 可以使用cnpm
或者 指定镜像地址(在末尾加上下面这行) 或者使用nrm
–registry=http://registry.npm.taobao.org
4. 创建 webpack 配置文件
- 在
src
目录下 创建webpack.config.js
文件,并设置打包模式
module.exports = {
mode:'development' // development开发 production生产
}
至此为止最最基本的webpack项目就搭建好了,不过我们还需要更多插件
5. 安装 webpack-dev-server
npm i webpack-dev-server -D
6. 在 package.json
中配置 scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --port 3000 --hot"
}
- –open 自动打开浏览器
- –port 3000 指定端口3000
- –hot 热更新
7. 安装 html-webpack-plugin 实现自动打开 index.html
npm i html-webpack-plugin -D
8. 配置 webpack.config.js
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname,'./src/index.html'), // 源文件
filename: 'index.html' // 生成的内存中首页的名称
});
module.exports = {
mode:'development',
plugins:[
htmlPlugin
]
}
9. 写几行代码 使用 npm run dev
运行