Skip to main content

自动打包

配置打包的入口与出口​

webpack 的4 ． x 版本中默认约定：

打包的入口文件为 src --> index

打包的輸出文件为 dist --> marn.js

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

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

配置webpack 的自动打包功能​

  1. 安裝支持项目自动打包的工具。 

    npm install webpack-dev-server -D

  2. 修改 package.json 一> scripts 中的dev命令如下：

    "scripts": {
        "dev": "webpack-dev-server" // script节点下的脚本可以通过 npm run 执行 
    }

  3. 将src 一> index 、html 中，scrxpt 脚本的引用路径， 修改为"/buldle.js"

  4. 运行npm run dev 命令， 重新进行打包

  5. 在浏览器中访问http://localhost:8081/ 地址， 查看自动打包效果

配置html-webpack-plugin 生成顺览页面​

  1. 安装生成预览页面的插件
npm install html-webpack-plugin -D
  1. 修改 webpack.config.js 文件头部区域，添加如下配置信息：
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html', // 指定要用到的模板文件
    filename: 'index.html' // 指定生成的文件名称，该文件存在与内存中，在目录中不显示
})
  1. 修改 webpack.config.js. 文件中向外暴露的配置对象，新增如下配置节点：
module.exports = {
    plugins: [ htmlplugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表
}

https://www.bilibili.com/video/BV1xJ41157m8?p=128

自动打开浏览器打开页面​

package.json 中配置

--open 打包完成后自动打开浏览器页面
--host 配置IP地址
--port 配置端口

"scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888 "
}