webpack从0到1的配置（二）

阅读本篇博客需要预先阅读webpack从0到1的配置（一）。

接着上篇博客讲plugins。

我们希望在打包后的项目里有index.html文件，并且自动引入main.js文件
这里需要安装插件html-webpack-plugin
npm install html-webpack-plugin --save-dev
修改webpack.config.js文件

const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: {main: './src/main.js'},output: {filename: '[name].js',path: path.resolve(__dirname, 'dist'),},+ plugins: [+  new HtmlWebpackPlugin({+   title: 'index', // <title>标签的内容+   template: './index.html', // 以哪一个html为模版+  }),+]
}

现在再执行一次npm run build
dist文件夹下生成了一个index.html文件，并且自动引入了mian.js文件。浏览器打开index.html,文字为红色

理解webpack打包思想：

我们现有的src目录下还有一个home.js的文件呢，现在在home.js的文件里写入

module.exports = {text: '我是home'
}

修改mian.js文件为

+ const home_text = require('./home');const text_p = document.getElementById('text-p');text_p.style.color = 'red';
+ text_p.innerHTML = home_text.text;

再次执行npm run build
浏览器打开dist目录下的index.html文件，可见文字被更改为'我是home‘，但是dist目录下依然只有main.js和index.html文件
webpack打包就是以main.js文件为入口，找到mian.js文件里引入的所有模块，打包成一个或多个文件。
继续学习webpack从0到1的配置（二）

webpack从0到1的配置（二）相关推荐

webpack从0配置和使用
webpack 1. webpack 概念: 支持模块化和打包核心功能实现前端模块化开发,支持 CommonJS.AMD.CMD,ES6 方案支持模块化开发,并且帮我们建立,模块之间的依赖关 ...
【Vue2.0】—Vue脚手架配置代理（二十二）
[Vue2.0]-Vue脚手架配置代理(二十二) 方法一方法二
webpack 4.0 配置方法以及错误解决
webpack 4.0 配置方法以及错误解决参考文章: (1)webpack 4.0 配置方法以及错误解决 (2)https://www.cnblogs.com/qqfontofweb/p/8516 ...
区块链教程Fabric1.0源代码分析配置交易-生成通道配置二
兄弟连区块链教程Fabric1.0源代码分析配置交易-生成通道配置二.Generator接口实现,即bootstrapper. type bootstrapper struct {channelGro ...
webpack 大法好 ---- 基础概念与配置（1）
再一次见面! Light 还是太太太懒了,距离上一篇没啥营养的文章已经过去好多天.今天为大家介绍介绍 webpack 最基本的概念,以及简单的配置,让你能快速得搭建一个可用的 webpack 开发环境 ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
Vue「一」—— webpack 的基本使用及常用配置
本文为 Vue 学习系列笔记第一篇,将持续更新. 文章目录一.前端工程化什么是前端工程化前端工程化的解决方案二.webpack 的基本使用什么是 webpack 创建列表隔行变色项目在项目 ...
hadoop2.2.0 集群安装配置
本集群由6台虚拟机组成,全部安装centos6.4的32位系统. 一.前期工作 1.修改Linux主机名 2.修改IP 3.修改主机名和IP的映射关系 4.关闭防火墙 5.ssh免登陆 6.安装JDK ...
ELK6.0已取消filebeat配置document_type
原文出处:https://blog.51cto.com/kexiaoke/2092029 一.起因在使用ELK5.5的时候,如果遇到需要在同一台机器上收集不同类型的日志,比如:同时收集一台机器上的 ...

webpack从0到1的配置（二）

webpack从0到1的配置（二）相关推荐

最新文章

热门文章