webpack 学习使用，搭建脚手架 一

webpack 学习使用，搭建脚手架

新建项目 webpack-1

• 1. git仓库建项目
• 2. git clone 到本地
• 3. git init 初始化，push 到仓库，然后进入开发

一：初始配置，项目目录

• 1.1 git init 初始化
• 1.2 下载安装 webpack， webpack-cli

npm install  webpack
npm install  webpack-cli

• 1.3 新增index.html 和新增文件夹src，src文件夹里新建文件index.js
• 1.4 打包生成包文件（bundle）。

执行 ` npx webpack ` 建了 /dist/main.js 文件  
( 或者package.json建scripts 里webpack命令 `"webpack": "webpack"` )

项目目录如下：

• 1.5 如果我们要稍微调整下目录结构，比如将根目录下的index.html移到dist文件夹中，就需要将再调整一下index.html中对main.js路径变化，并重新使用npx webpack 或者 npm run webpack 打包

一般我们会把打包后的静态资源放在服务器即可：

二： 使用配置文件 webpack.config.js

以上是一个很简单的项目，但是现实却是大多数项目需要很复杂的设置，那我们就把这些复杂的配置专门搞个文件来写吧，先来创建这个文件吧

• 2.1 在项目根路径下创建文件 webpack.config.js

webpack.config.js代码：

// 引入路径path模块
const path = require('path');
 
module.exports = {
    // 入口
    entry: './src/index.js',
    // 出口
    output: {
        // 输出文件的文件名
        filename: 'main.js',
        // 输出文件的路径，__dirname 总是指向被执行js文件的绝对路径
        path: path.resolve(__dirname, 'dist')
    }
};

上面output属性表示目标输出是 根路径下的dist文件下的main.js

你可以把之前例子中的main.js删除，然后在终端执行命令：

npx webpack --config webpack.config.js 或者 npm run webpack-config

删除main.js后你再去执行npx webpack --config ，会发现有重新根据webpack.config.js配置文件生成新的目标输出文件main.js

一般默认输出到dist文件，现在有了配置文件，通过当然可以通过配置文件改为其他出口啦

三 配置 plugin:

• 3.1 html-webpack-plugin: 在上面 需要我们手动建 html 页面，然后引入静态资源。如果多spa 项目想下是不是很麻烦？那么我们可以使用HtmlWebpackPlugin插件，它能自动生成一个html文件，并帮你在body中使用 script 标签引入所有 webpack 生成的 bundle。

// 安装
npm install html-webpack-plugin -D

然后再 webpack.config.js 
// 引入 HtmlWebpackPlugin 模块
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 并配置
plugins:[
    new HtmlWebpackPlugin(),
]
且是可以传参数的，例如模板地址 **`template`** ， **`filename`**， **`title`**，详细可以参考： https://www.npmjs.com/package/html-webpack-plugin  
或者： https://blog.csdn.net/qq_40305844/article/details/128204599

// 例如：
plugins:[
    new HtmlWebpackPlugin({
        title： 'title',
        filename:'index.html',
        template:'./public/index.html'
    }),
]

再次执行 npm run webpack-config

• 3.2 clean-webpack-plugin: 多spa 项目，一般打包资源文件会带哈希， 每次打包都会新增资源文件， 因此需要把老的资源文件给删除。打包输出请先使用 clean-webpack-plugin 插件清空目录

// 安装
npm install clean-webpack-plugin -D
// 引入并配置
//引入 CleanWebpackPlugin 模块
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins:[
    new CleanWebpackPlugin()
]
// 通用可以配置参数，参考： https://github.com/johnagan/clean-webpack-plugin

• 3.3 webpack-dev-server:文档

  经过上面的一系列操作，每次经常编译后打包，你都要手动去刷新浏览器，怪麻烦的，这个当然也有办法解决，就是使用webpack-dev-server，它是一个小型的 web 服务器，能够实时重新加载。

使用它了以后文件有什么修改会进行实时编译，并且会看不到产生的dist文件（也就是说看不到output属性中那些输出的路径下的文件），因为启动后webpack-dev-server后，会将打包编译结果暂时存在内存中，并读取数据，发送给浏览器。

npx install webpack-dev-server -D

需要设置 mode:'development' , //production

然后执行 npx webpack-dev-server

可以访问 http://localhost:8080/

如下图

我们可以在命令后面增加参数，可以同时跟多个参数，参数的含义就列在下面了

--hot 是热刷新 开启 Hot Module Replacement模式 --inline 是刷新模式 --progress 显示 Webpack 打包进度 --color 控制台输出的内容是否开启颜色 --mode 指定打包环境的mode，取值为development和production，分别对应着开发环境和生产环境 --open 自动打开浏览器 --config 指定一个 Webpack 配置文件的路径

3.31 我们选择一个比较常用的命令，手动更改package.json里 script中使用参数

配置命令

 "dev": "npx webpack-dev-server --mode development --progress --color --open",

执行 npm run dev , 热更新，自动打开页面 访问： http://localhost:8080/

3.32 除了设置快捷命令，也可以在 webpack.config.js 配置 devServer

devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
    open: true,
},

访问： http://localhost:9000/

这篇好文章是转载于：学新通技术网