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 打包生成的输出文件，默认放到了项目根目录中，并且是虚拟的，看不到的