webpack的配置汇总

配置打包的入口与出口

1. 默认约定webpack 的 4.x 版本中默认约定

1. 打包的 入口文件为 src -> index.js
2. 打包的 输出文件为 dist -> main.js

2. 修改 修改打包的入口与出口，可以在 webpack.config.js 中新增加如下配置信息

const path = require('path') // 导入 node.js 中专门操作路径的模块 path
module.exports = {
entry: path.join(_dirname,'./src/index.js'),//打包入口文件的路径
output: { 
        path: path.join(__dirname,'./dist'), // 输出文件的存放路径
        filename: 'bundle.js' //输出文件的名称
    }
}

3. 在终端中运行如下命令，测试 打包 入口与出口是否更改

npm run dev 

打包完成之后，会在 dist 文件夹里面 会自动生成 bundle.js ,然后 再回到 src -> index.html 中，重新引入 打包之后的 bundle.js 文件，运行 index.html，依然可以照常运行。

但是此时我们会发现，每次 js 更改之后我们都需要重新手动打包，那要怎么样才能是实现自动打包的功能呢？请继续往下看

配置自动打包

1. 在终端中运行如下命令，安装支持项目自动打包的工具

npm install webpack-dev-server -D 

2. 修改 package.json 文件中 scripts 对象的 dev 命令,如下配置：

// package.json 中的配置
"scripts": {
    "dev": "webpack-dev-server" // script 节点下的脚本，可以通过 npm run 执行
  },

3. 将 src -> index.html 中，scripts 脚本的引用路径 ，修改为根目录下的 buldle.js

<script src="/bundle.js"></script>

4. 运行 如下命令，重新运行打包

npm run dev 

5. 复制终端中的http:localhost:8080 地址，然后在在浏览器中访问就可看到打包之后的项目。

注意：

• webpack-dev-server 会启动一个实时打包的 http 服务器
• webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的，看不到的

6. 此时项目的运行需要我们在浏览器手动输入地址才可以访问，那我要想项目启动之后自动弹开浏览器要怎么配置呢？

需要我们修改 package.json 文件中 scripts 对象的 dev 的相关参数，具体修改如下：

// package.json 中的配置
// --open 打包完成后自动打开浏览器页面  --host 配置 IP地址  --port 配置端口
"scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.0 --port 8888"
}

修改之后重新运行 npm run dev 命令进行打包会发现项目自动弹出浏览器，说明我们已经配置成功了～

但是此时我们会发现项目虽然正常运行，没有报错，但却不是我们想要的页面。
那要怎样才可以直接预览到我们想要的页面呢？请继续往下看

配置预览页面

1. 在终端中运行如下命令，安装生成预览页面的插件

npm install html-webpack-plugin -D

2. 修改 webpack.config.js 文件头部区域,添加如下配置信息：

// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({//创建插件的实例对象
  template: './src/index.html',// 指定要用到的模版文件
  filename: 'index.html'//指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

3. 修改 webpack.config.js 文件中向外暴露的配置对象 ，新增如下配置节点：

module.exports = {
  plugins: [ htmlPlugin ] //plugin 数组是 webpack 打 包期间会用到的一些插件列表
}

4. 此时再 运行 如下命令，重新运行打包

npm run dev 

5. 在浏览器中 继续访问 http:localhost:8080 地址，既可以看到我们想要的页面。

注意：

• webpack-dev-server 会启动一个实时打包的 http 服务器
• webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的，看不到的