webpack4 从0开始搭建前端模块化脚手架

webpack 搭建前端模块化脚手架

webpack简介 官网地址

引用官网的一段描述：webpack是一个现代的javascript应用程序的静态模块打包器，在webpack处理应用程序时他会递归的创建一个依赖关系图，其中包含应用程序的需要的每个模块，然后将这些模块打包成一个或多个bundle。webpack默认的配置文件是webpack.config.js。
在webpack中最核心的有四个概念：

1. 入口(entry) ，入口会指定webpack应该使用那个模块作为构建内部依赖图的开始；
   入口配置：

		const config = {
		  entry: {
		    index :  ['./page/index.js'],
		    vendors: ['./page/vendors.js']
		  }
		};
		// 这里配置了两个入口 分别是index和vendors 

2. 出口(output) ，output属性配置了webpack将它创建的bundles输出到哪里和文件如何命名，默认值为./dist；注意：即使可以存在多个入口起点，但只能指定一个输出配置。
   出口配置（结合上边配置的出口）：

		const path = require('path');
		const config = {
		  entry: {
		     index :  ['./page/index.js'],
		    vendors:  ['./page/vendors.js']
		  },
		  output: {
		    path: path.resolve(__dirname,'./dist'),
		    filename: '[name].js'
		  }
		}
		//这里是多入口文件的输出配置，[name]通配符可以取到入口定义的名称
		//上述代码打包后会输出两个js文件，分别是/dist/index.js和/dist/vendors.js他们都被打包到/dist文件夹中

3. loader ，webpack是将各个模块通过模块之间的依赖关系进行打包的。webpack自生只会处理javaScript文件，一些非JavaScript文件webpack自身处理不了。loader让webpack能够处理哪些非JavaScript文件。loader可以将所有类型的文件转换为webpack能够处理的有效模块进而可以使用webpack的打包能力进行打包。
   loader配置：

		module: {
		    rules: [{ 	
		    	test: /\.css$/, 	//标识被对应的loader进行转换的某个或某些文件。
		      	use: 'css-loader'  //进行转换时，应该使用那个loader
		     }]
		  }
		  /*
		  	上边配置项表示，当我们遇到[require()/import]语句中引用.css结尾的文件时，
		  	在进行webpack打包前先使用css-loader转换一下。
		  */

4. 插件(plugins) ，插件的功能要比loader更加强大个广泛，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量；
   插件配置：

		const HtmlWebpackPlugin = require('html-webpack-plugin'); //需要通过npm安装
		plugins: [
		    new HtmlWebpackPlugin({template: './page/index.html'})
		  ]
		//上边配置使用插件HtmlWebpackPlugin来打包HTML模板。

开始脚手架搭建

搭建脚手架我们需要以下步骤进行：
1. 利用npm init命令初始化项目，建立基本项目文件夹结构
2. 安装webpack，全局安装和项目中安装
3. 进行webpack多入口和出口配置
4. 进行公共模块配置，打包公共模块
5. css文件处理，独立打包css文件
6. html文件处理，打包html模板
7. 打包静态资源，如：图片、字体等
8. webpack-dev-server安装

1. 利用npm init命令初始化项目
   使用npm命令前需要安装node.js。
   在本地磁盘上新建项目文件夹demo，cmd到demo然后执行npm init初始化项目（初始化项目时好多配置选项这里不进行赘述）。
   初始化项目后生成一个package.json的配置文件，我们建立我们的目录结构：

		--demo
			--src
				--image
				--page
				--view
			package.json

2. 安装webpack
   进行全局安装webpack: npm install webpack -g
   在项目目录下安装webpack：npm install --save-dev webpack
   安装成功后可以看到package.json中已经存在webpack了：
3. 进行webpack多入口和出口配置
   在package.json文件同级目录下创建webpack.config.js（webpack配置文件）
   webpack.config.js配置如下:

	const path = require('path');

	var config = {
	    // 定义入口配置
	    entry : {
	        'index' : ['./src/page/index/index.js'],  //./src/page/index/index.js 作为入口文件
	        'one'   : ['./src/page/one/index.js']
	    },
	    //定义文件输出配置
	    output : {
	        path     : path.resolve(__dirname,'./dist'), //输出文件输出到当前目录下的dist文件夹下
	        filename : './js/[name].js'  //文件生成的命名是以入口定义的名称+.js进行的，并且放置到dist/js文件夹下
	    }
	}

	module.exports = config;

进行配置验证：
在demo/page文件夹下创建index和one文件夹，并且分别创建出index,js文件
demo/page/inex/index.js

console.log('我是in