webpack资源打包

静态资源

webpack指南

环境要求

 

或更高版本。

起步创建

npm init -y            // 初始化项目 package.json
// 安装webpack  webpack-cli
npm install webpack webpack-cli --save-dev

调整package.json:

• 设置安装包为私有"private":true
• 并移除"main":"index.js"属性定义

创建一个webpack配置文件webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports={
	mode: "development",
	entry:{
		app:"./src/index.js",
	},
	output:{
		filename:"[name].bundle.js",
		path:path.resolve(__dirname,"dist")	
	},
	module:{
		rules:[
			{
				test:/\.css$/,
				use:[
					"style-loader",
					"css-loader"	
				]	
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
            title:"Output Management"
        }) 
	]
}

文件说明：

• mode指定模式，development/production/none,每种模式都有适用的插件。
• entry定义主入口文件，可指定多个入口文件,命名自定；示例中app:"./src/index.js"
• output定义输出文件，filename定义生成的文件名,示例中[name].bundle.js会生成文件app.bundle.js
• module定义加载模块，属性rules定义指定文件打包的库。
  • test正则表达式，定义需要加载的文件名后缀，
  • use指明加载库。
• plugins定义插件，

主入口文件定义
./src/index.js：es6/ts/vue/react需要加载转义器babel,各自对应相关设置。

import _ from "lodash";                     // 外部库导入
import printMe from "./print.js";        // 自定义JS导入
import "./style.css";                     // 自定义样式导入

import Icon from "./001.png";       // 图片导入
import Data from "./data.xml"        // 资源文件导入、xml/json等

function component() {
    // 组件定义
    // ...
    return `<h3>hello</h3>`;
  }

1. 如果已经指定了主页面,如：index.html,则需在页面中引入打包后的JSapp.bundle.js
2. 可能会随时增加入口文件，就要再次手动添加引入，使用插件html-webpack-plugin,实例中webpack.config.js中配置，会自动生成index.html,自动引入资源文件。

执行构建命令：

// 命令执行
npx webpack --config webpack.config.js
// 修改package.js 添加脚本 build
"scripts": {
    "build": "webpack"
 }
// 使用npm 构建
npm run build 

src为存放原始文件目录，dist为存放编译完成的文件目录。

开发中的设置

1. 追踪编译时报错的具体文件。source map
   用于开发环境。webpack.config.js增加配置

    devtool:"inline-source-map"
   

2. 更改文件后，无需手动编译。设置自动编译

   • watch模式，webpack以轮训方式检查文件的最后编辑时间，对比差异更新。但须手动刷新浏览器才能看到更新。
     package.json增加脚本：

       "scripts": {
           "watch": "webpack --watch",
         },
     

   • webpack-dev-server提供简单的web服务，具有实时重新加载功能。这样的编译的文件是放到内存中的，运行速度快。
     webpack.config.js增加配置：

       devServer: {
           contentBase: "./dist",
           hot: true
       },
     

     package.json增加脚本：

       "scripts": {
           "start": "webpack-dev-server --open",
         },
     

     默认访问地址localhost:8080

   • webpack-dev-middleware可作为中间键使用，webpack-dev-server内部使用了，可单独用于自己的服务汇总，比如搭建的node express服务。
     webpack.config.js增加设置：

       output: {
           filename: "[name].bundle.js",
           path: path.resolve(__dirname, "dist"),
           publicPath:"/"
       },
     

     在node服务中server.js指定webpack编译配置文件

       	const express = require("express");
       	const webpack = require("webpack");
       	const webpackDevMiddleware = require("webpack-dev-middleware");
       	
       	const app = new express();
       	const config = require("./webpack.config.js");
       	const compiler = webpack(config);
       	
       	app.use(webpackDevMiddleware(compiler,{
       	    publicPath:config.output.publicPath
       	}));
       	app.listen(3000,function(){
       	    console.log("the server running on port 3000 \n");
       	});
     

     package.json增加启动脚本：

       "scripts": {
           "server": "node server.js",
         },
     

3. 环境差异：
    设置开发模式mode,会有一个全局的环境变量process.env.NODE_ENV供程序中访问。
   development开发环境：

   • source map
   • 实时重新加载
   • 热模块替换（未学习）

   production生产环境

   • 压缩bundle
   • 资源优化

资源打包库

文件后缀	打包库	说明
.css	style-loader css-loader
.(png|svg|jpg|gif .(woff|woff2|eot|otf|ttf)	file-loader
.(csv|tsv)	csv-loader
.xml	xml-loader	json格式默认支持，内部执行加载
.m?js$	babel-loader	JS超集语法转义

插件

插件名称	作用	说明
html-webpack-plugin	自动生成主页面index.html,参数可自定义配置
clean-webpack-plugin	每次构建项目是，先清除dist目录