[webpack]搭建一个基本的webpack4.x项目(保姆级教程)

[webpack]搭建一个基本的webpack4项目(保姆级教程)

目录

1. 创建项目目录，初始化项目
2. 创建目录 创建文件
3. 安装 webpack 和 webpack 脚手架 包
4. 创建 webpack 配置文件
5. 安装 webpack-dev-server
6. 在 package.json 中配置 scripts
7. 安装 html-webpack-plugin 实现自动打开 index.html
8. 配置 webpack.config.js
9. 使用 npm run dev 运行

正文

重要

• 教程全文以webpack4.x最新版本为基，若不是webpack4切勿参考

1. 创建项目目录，初始化项目

1. 创建一个项目文件夹 不要起名为 webpack 会冲突
2. 在该文件夹下打开终端

npm init -y

• 根目录下会自动生成 package.json 文件

2. 创建目录 创建文件

1. 在根目录创建文件夹

• src
• dist

2. 在 src 中创建文件

• index.html
• index.js
  

• 注意：webpack 4.x 默认打包入口是 src -> index.js 默认输出文件是 dist -> main.js

3. 安装 webpack 和 webpack 脚手架 包

1. 打开终端 使其处于项目根目录
2. npm i webpack -D 安装 webpack
3. npm i webpack-cli -D 安装 webpack脚手架
   
   
   

• 如果 npm 太慢 可以使用 cnpm 或者 指定镜像地址(在末尾加上下面这行) 或者使用 nrm

–registry=http://registry.npm.taobao.org

4. 创建 webpack 配置文件

1. 在 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 运行

创作不易 感谢支持