【Webpack】Webpack之打包html,css,js,img（一）

项目背景：已完成了项目，在原来的HTML，JS…上构建项目。

原项目：

步骤1：安装 Webpack

使用 npm 安装 webpack 模块，在 webpack 3 中，webpack本身和 webpack-cli 都是在同一个包中，但在第4版中，两者已经分开管理，故需要全局安装 webpack 和 webpack-cli 。

1
2
3

// 全局安装
npm install -g webpack (webpack核心包)
npmt install -g webpack-cli (webpack命令行工具，依赖于webpack核心包)

步骤2：创建package.json

进入项目根目录，执行 npm init -y 创建 package.json。

步骤3：使用 Webpack

项目中安装 Webpack: npm install webpack --save-dev

步骤4：修改文件结构

修改文件结构后

步骤5：安装打包html插件

1	npm install html-webpack-plugin --save-dev

步骤6：配置 webpack.config.js

在项目根目录，创建 webpack.config.js, 并配置一下内容：

var webpack = require('webpack');
var path = require('path');
//打包html的插件
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {

	entry:{
		'js/index': './app/js/index.js',  //入口文件：  多页面入口配置就是这样
		'js/index': './app/js/index.js',
		'js/index': './app/js/index.js',
	},
	output:{
		// __dirname 当前 webpack.config.js 的路径
		filename: '[name].min.js',  // 打包后index的名称，
																// 这个[name]的意思是,配置入口entry键值对里的key值,dist/js/index,最后的index，
																// 这里无论你app/js/index.js这个脚本如何命名，打包后都将是index.min.js
		// path: path.resolve(__dirname)
	},

  // 插件 
	plugins:[
		new HtmlWebpackPlugin({
			chunks: ['js/index'],       // dist文件夹里面的路径
			template: 'app/index.html', // 模板路径  即app文件夹里
			filename: 'index.html',     // dist文件夹里面的路径
		})
	]
}

最后一步

在根目录下执行 webpack -p, 即可打包了，生成 dist 文件。

效果

优化

防止浏览器缓存，修改配置文件``：

// 修改前
output:{
	filename: '[name].min.js',
}
// 修改后
output:{
	filename: '[name].[chunkHash:5].js',
}

结果：

赏

支付宝打赏

微信打赏

欣赏此文，打赏一下