webpack 之单页面打包

上一篇文件简单的介绍的一些webpack的基础知识和简单应用以及部分loader的使用，今天将会介绍一些loader和plugins常见插件配置，下篇文章将会介绍多页面打包配置

在现在工程化开发的今天比如会使用一些工程化语言帮助我们快速开发，减少时效性例如，less scss等css预处理语言，那么我们就来说说怎么样在webpack中配置。

// 依然新建一个文件

webpack-2
	-- src
		-- img // 图片音频视频等文件
		-- css
    		// .css/.scss/.less 文件 
    	-- html  // 模板文件
        	template.html 
        -- js
        	header.js	 // 头部
        	sidebar.js 	 // 侧边栏	
        	content.js 	 // 内容區域 
        	index.js 	// 入口文件
        

js 目录下

// index.js
import {
   createHeader} from "./header";
import {
   createContent} from "./content";
import {
   createSidebar} from "./sidebar";
import '../css/overall.css'  // 引进css文件
import '../css/index.scss'

let root = document.querySelector('body');

createHeader(root);
createSidebar(root);
createContent(root)

// header.js
import '../css/header.css'

export const createHeader = (root) => {
   
  let eleDiv = document.createElement('div');
  eleDiv.innerText = '我是头部';
  root.appendChild(eleDiv);
}

// sidebar.js
export const createSidebar = (root) => {
   
  let eleSidebar = document.createElement('div');
  eleSidebar.innerText = '我是侧边栏区域'
  root.appendChild(eleSidebar);
}

// content.js
import imgUrl from '../img/682626.png'
import '../css/content.css'

export const createContent = (root) => {
   
  let eleDiv = document.createElement('div');
  eleDiv.innerText = '我是内容区域'
  let eleImg = document.createElement('img')
  eleImg.src = imgUrl;
  root.appendChild(eleDiv)
  root.appendChild(eleImg)
}

css 目录下

// content.css
img {
   
    width: 300px;
}

// header.css
div {
   
    width: 100%;
    height: 60px;
    background: blueviolet;
}

// overall.css
* {
   
    padding: 0;
    margin: 0;
}
body {
   
    background