一个简单的webpack打包

首先全局安装webpack

npm install  webpack -g

查看webpack 版本 webpack -v

如果出现以下错误

The CLI moved  into  a separate package: webpack-cli.

Please install  'webpack-cli'  in  addition to webpack itself to use the CLI.

-> When  using  npm: npm install webpack-cli -D

 

-> When  using  yarn: yarn add webpack-cli -D




则全局安装webpack-cli

npm install webpack-cli -g

webpack全局安装即完成

再创建一个项目mywebpack

目录总和

项目下创建一个json文件 package.json 

//package.json
{
	"name": "mywebpack",
	"version": "1.0"
} 

或者也可以使用npm init 来自动创建package.json。

再在项目目录下局部安装webpack

npm install  webpack --save-dev  

安装成功后项目会出现一个文件夹node_modules和一个package-lock.json ，同时package.json文件也会更新webpack的版本

接着我们在项目根目录下创建一个src文件夹，在src文件夹下创建一个js文件夹，在js文件夹下创建一个entry.js文件

//entry.js
document.write("hello");

关键（否则执行webpack命令会出错）：在根目录下创建一个配置文件webpack.config.js

//webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/js/entry.js',//主模块
  output: {    //打包输出文件及路径
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

然后我们就会在项目下的dist文件夹下会发现一个打包好的bundle.js文件

在index.html中引入这个js文件便会输出hello

打包json文件

创建json文件: src/json/webpack.json

//webpack.json
{
	"project" : "webpack",
	"version" : "4.1.1"
}

更新入口js : entry.js

//entry.js   
//注意：引入json会自动被转换为原生的js对象或者数组
import data from '../json/data.json'
document.write("hello");
document.write(data + "<br />");//object
document.write(JSON.stringify(data)); //{"project":"webpack","version":"4.1.1"}

运行webpack即可生成新的已经打包好json的bundle.js

————————————————————————————————————————————

打包css和图片文件

首先在项目内安装样式的loader

 npm install css-loader style-loader --save-dev
 npm install file-loader url-loader --save-dev

说明：

css-loader：打包，加载CSS模块，但无法渲染到页面
style-loader:渲染到页面中，但不能打包CSS

url-loader：打包图片，小于8KB以base64编码的形式打包在js中，减少请求的发送

url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

配置loader

更新webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/js/entry.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [//两个loader分别用数组形式包裹起来
      {//URL-loader.注意：file-loader只需要安装即可
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      },
      {//css-loader和style-loader
    	test: /\.css$/,
     	use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

修改html代码

加入一个id为box1的div，在src文件夹的img文件夹下放入两张图片，一张大于8KB一张小于8KB（webpack运行后你会发现大于8KB会打包放在dist文件夹下，而小于8KB的在JS文件夹以base64形式存在）

再在src的文件夹下创建一个css文件夹创建webpack.css文件

/*webpack.css
*/
body{
	font-size : 20px;
	background: url(../img/bg.jpg) no-repeat;
}
#box1{
	width: 300px;
	height: 100px;
	background: url(../img/top1.png) repeat-x;
}

在entry.js中增加一行引用css文件的代码

//entry.js 引用webpack.css
import '../css/webpack.css';

运行webpack命令打包完成。

此时打开index.html你会发现字体已经改成20px并没有图片加载，说明css是引入成功的，但图片却加载不出来。这是因为页面加载图片会在所在目录位置查找，导致页面加载图片时候图片路径无法找到。

解决办法：将index.html文件将放在已经打包好的dist文件夹下，和bundle.js，图片文件放在一起（而且当前只有一张图片，是因为url-loader将小于8KB的图片以base64编码的形式加载到JS文件下，少一张图片则少发一次请求）

————————————————————————————————————————————

使用webpack插件

 常用的插件
 使用html-webpack-plugin根据模板html生成引入script的页面
 使用clean-webpack-plugin清除dist文件夹
 使用uglifyjs-webpack-plugin压缩打包的js文件
 下载安装

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

webpack.config.js配置

//webpack.config.js
//引入webpack 的html-webpack-plugin 插件 自动生成html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除之前打包的重复文件  
const path = require('path');

module.exports = {
  entry: './src/js/entry.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [//两个loader分别用数组形式包裹起来
      {//URL-loader.注意：file-loader只需要安装即可
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      },
      {//css-loader和style-loader
    		test: /\.css$/,
     		use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  plugins: [
  	new HtmlWebpackPlugin({template: './index.html'}),//设置以根目录下的index.html为模板
  	new CleanWebpackPlugin(['dist'])		   //删除dist文件夹的文件			
  ]
};

主页面index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="box1"></div>
		<!--打包文件将自动通过script标签注入到此处-->
	</body>
</html>

运行webpack

会发现dist文件夹下除了有编译后的图片和bundle.js还生成了一个以./index.html为模板的index.html文件，还自动帮你加载了bundle.js