webpack 从零开始(中
简介: webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。
上文:webpack从零开始(上
四、管理输出
管理输出(output) 的话,就得经常用到插件(plugin),咱们还是跟着官方的实例来走
index.js 改回原来的hello world,新建一个print.js
// import App from './App.vue'
// import { createApp } from 'vue'
// createApp(App)
// .mount("#app")
(function(){
const el = document.createElement('div')
el.innerHTML = 'Hello world!'
document.body.appendChild(el)
})()
这里我们用上一个HtmlWebpackPlugin 用来自动生成html 文件,当输出文件修改的时候就能够自动引用js文件
cnpm install --save-dev html-webpack-plugin
修改配置文件webpack.config.js
const HtmlWebpackPlugin = require( 'html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack Begin'
})
]
npm run build ,检查一下index.html OK 生成了新的html文件
<!doctype html><html><head><meta charset="utf-8"><title>Webpack Begin</title><meta name="viewport" content=&