webpack定义打包结构

使用webpack配置文件打包输入输出打包文件及自定义打包指令

千次阅读 2019-11-28 23:44:18

本文开始讲解如何通过webpack配置文件打包，首先，来看一下项目的目录结构。上一篇文章讲到最基础的打包方式，没有使用webpack的配置文件来打包。使用webpack配置文件就得先在目录中新建一个webpack.config.js...

本文开始讲解如何通过webpack配置文件打包，首先，来看一下项目的目录结构。 
 
上一篇文章讲到最基础的打包方式，没有使用webpack的配置文件来打包。使用webpack配置文件就得先在目录中新建一个webpack.config.js文件，这个就是webpack的配置文件。 
1、新建webpack.config.js文件 
touch webpack.config.js 
2、目录 
 
  
3、在配置文件中编写入口文件、输出打包文件的位置 
const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
} 
 4、查看index.html文件，因为之前写了引入打包文件的路径是./dist/main.js，但是这里因为改成了bundle.js，所以index.html也要改一下script标签里面的src。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Index</title>
</head>
<body>
    <div id="root"></div>
</body>
<script src="./dist/bundle.js"></script>
</html> 
5、开始输入打包指令 
npx webpack index.js 
成功打包后显示如下信息 
 
  
6、然后用浏览器打开index.html文件，还是如上次那样显示了同样的内容： 
 
  
7、自定义打包指令 
如果想要自定义打包指令，比如webpack.config.js文件名称改成xx.config.js，可以这样做：npx webpack --config xx.config.js 
就是在打包时加上--config。 
  
8、修改package.json文件的script配置项，也能实现自定义打包指令，比如npm run build是最常见的打包指令，那么就可以这样做：把package.json文件的scripts配置如下所示： 
 
值得注意的是，在npm run build之前，先把xx.config.js文件还原成webpack.config.js的命名方式，否则会出现错误： 
 
然后再运行 npm run build 
 
  
  
  
-end-

收起

展开全文

Webpack4打包多页面工程基本教程——小白的填坑之旅

千次阅读 多人点赞 2019-06-05 23:17:28

Webpack是当下使用人数最多的网页打包工具。当前其github主页的star数量为49.2k，比另一个流行的打包工具parcel（31.9k）要高不少。本人（小白一枚）由于项目需要的原因，最近几个月断断续续学习和使用webpack进行多...

1. 背景

Webpack是当下使用人数最多的网页打包工具。当前其github主页的star数量为49.2k，比另一个流行的打包工具parcel（31.9k）要高不少。本人（小白一枚）由于项目需要的原因，最近几个月断断续续学习和使用webpack进行多页面工程的打包，可以说是一路挖坑一路填坑，最终实现了令人满意的效果。本文将回顾一路以来遇到的主要问题，简单分析并着重给出解决方案，主要包括：

html、js、css和图片的打包、压缩方法
多页面入口的正确打包结构及注意事项
多页面入口babel/polyfill引用方式
开发与调试配置文件差异

我希望给遇到同样问题的读者一些技术上的建议和帮助，从而少走弯路。文末会给出配置文件的完整代码，请读者耐心阅读，也希望指出笔者存在的问题，提出宝贵的建议。下面我将循序渐进地分享我的经验。😉

2. 什么是Webpack?

随着ECMAScript的版本不断迭代，node.js的不断推广，大页面被切分为小模块，一个js文件引用了多个js文件，很多的开源js库也可以通过下载，被引用到自己的工程中。这样的作法是有利于开发者的：将功能一致的代码提取到独立的文件中，既减少了每个文件的体积，降低开发难度，提高代码组织清晰度，又提高了代码的复用性。但是这么深的文件结构以及无数的小文件并不利于浏览器加载，因此，将多个模块和依赖合并为一个文件，简化网页工程的结构，这是webpack的基本能力。

在此基础之上，结合编译和压缩相关的库，webpack还可以编译js文件以及压缩网页、脚本、样式以及图片文件。从而得到浏览器可以直接使用的打包后的工程。
webpack官网首页

3. 基本安装

在确保node.js安装好的前提下，首先创建项目目录文件夹webpack-demo

mkdir webpack-demo && cd webpack-demo

安装webpack4.0以上版本，安装完成后，当前目录下会出现node_modules文件夹和package-lock.json。

npm install --save-dev webpack webpack-cli

创建和初始化package.json文件

npm init -y

初始化后的package.json文件结构如下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack-cli": "^3.3.2",
    "webpack": "^4.33.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

这里我给这个json添加以下代码，防止意外发布私有库：

{
...
"private":true,
...
}

对于package.json的详细介绍可以参考这篇文章mujiang.info。
这样，webpack环境就基本配好。接下来我直接介绍多文件打包的流程。👽

4. 多文件基本结构

|–node_modules
package.json
package-lock.json
|–dist
   |–img
   |–css
   |–js
   index.html
   second.html
|–src
   |–img
   |–css
   |–js
   index.html
   second.html

PS：/dist：打包后的文件夹； /src：打包前的文件夹

该文件目录只是多文件结构的一种，当然也可以一个页面做一个文件夹，然后下面包含/img、/css等资源文件。本文以该结构进行讲解。

5. 打包配置文件

5.1. 创建配置文件

打包配置文件是webpack的特点之一，webpack根据配置文件的设定对文件夹进行打包。通常我们会在根目录直接创建一个名为webpack.config.js的配置文件，这也是webpack默认的配置文件位置。但是其实是可以灵活调整的。这里我直接创建两个配置文件，一个用于调试（webpack.config.dev.js），一个用于发布（webpack.config.build.js）。

我在根目录创建一个名为config的文件夹，然后创建上述两个配置文件，文件结构变为：

|–config
webpack.config.dev.js
webpack.config.build.js
…

我先对用于开发的配置文件进行介绍。

5.2. webpack.config.dev.js配置文件

基本内容如下：

const webpack = require('webpack');
const path = require('path');

module.exports = {
	mode:"development",
	entry:{...},
	output:{...},
	module:{...},
	plugins:[...],
	...
}

各参数含义如下表：

参数	含义
mode	可以选"development"或"production"，前者表示开发模式，不压缩；后者表示生产模式，会对js文件进行压缩。
entry	打包入口，通常为某个js文件
output	打包输出路径
module	打包规则，不同后缀的文件用不同的包来处理
plugins	实现一些功能用到的插件

下面对各参数详细讲解。

5.2.1. entry

entry可以定义多个入口，格式如下：

entry:{
	name1:'./src/js/name1.js',
	name2:'./src/js/name2.js',
	...
}

PS：name1为别名，‘src/js/name1.js’为入口js文件的路径，该路径是以根目录为当前目录，注意’src’前面不能少掉’./’，否则打包会报错找不到该文件。

对于上述文件结构，每个html都会对应一个js入口文件，比如index.html引用了index.js，first.js作为入口引用了其他的文件。同理，second.html引用了second.js作为入口文件，那么entry可以写为：

entry:{
	index:'./src/js/first.js',
	second:'./src/js/second.js',
}

这样就会打包这两个js。

5.2.2. output

output基本设置如下：

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

PS:需要注意的地方有两点

path的当前目录是webpack.config.js的当前目录，即/config，而/dist与/config是平行关系，因此写的是’…/dist’。
filename是打包后的文件名，是相对于path。name是entry中的别名，'js/[name].js’表明打包后的位置是/dist/js/[name].js。

5.2.3. module

module基本结构如下：

module:{
	rules:[
		{
			test:正则表达式,
			use:[对应的loader]
		}
	]
}

module的作用是匹配不同类型的文件，用不同的包进行处理和解析。这里就涉及到文件的压缩问题。html、js、css和图片的打包策略都不同，我将在后面的章节中详细介绍。

5.2.4. plugins

plugins是为了更方便打包，实现了某些功能的接口。我将在后面实现具体功能时穿插plugins的配置方法。

5.3. webpack.config.build.js配置文件

发布的版本和调试用的版本有很大的区别，主要差异在于文件的体积小很多。这里就引出第六章压缩文件的话题。

6. 压缩文件

网页是由许许多多资源文件组成的，包括网页文件（.html）、脚本文件（.js）、样式文件（.css）、以及图片文件（.jpg、.png）等等。当浏览器打开这些网页时，本质上是从服务器上下载这些资源文件到浏览器上，再通过浏览器对这些文件进行解析，渲染成我们所看到的各式各样的网页。既然是从服务器上下载，在不影响效果的前提下，我们都希望文件越小越好，因为这样下载的时间更短，用户体验就会提高。压缩文件的方式最简单的就是将文件中的换行和空格去掉，而压缩不同类型的文件用到的库页不同，下面介绍对于四种资源文件的压缩打包配置方式。

6.1. 压缩html

通常打包的js，与html是没有对应关系的，即独立打包，之后在html中对打包后的js进行引用。但其实通过插件，html和js是可以联系起来的。这里用到了html-webpack-plugin包，安装方式如下：

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

安装后，在plugins中进行配置：

const htmlPlugin = require('html-webpack-plugin');
...
plugins:[
	new htmlPlugin({
    	filename:'index.html',//打包后的文件名
		minify:{//对html文件进行压缩
	        removeAttributeQuotes:true, //去掉属性的双引号
	        removeComments: true,//去掉注释
	        collapseWhitespace: true,//去掉空白
	    },
   		chunks:['index'],//每个html只引入对应的js和css
   		inject:true,
	    hash:true, //避免缓存js。
	    template:'./src/index.html' //打包html模版的路径和文件名称
	}),
	new htmlPlugin({
		filename:'second.html',
		minify:{...},
   		chunks:['second'],
   		inject:true,
	    hash:true, 
	    template:'./src/second.html'
	}),
	...
]

PS：关键的几个属性

template：选择要打包的html路径，以根目录为当前目录
chunks：写entry中的入口名称，即对应的js
minify：压缩配置

根据上述配置，可以进行多个页面（html）的匹配（与js）和压缩。

6.2. 压缩图片

图片压缩分为两类，一类是在html中的图片，另一类是在js或者css中的图片。

需要下载两个库url-loader和html-withimg-loader，安装方式如下：

npm install --save-dev url-loader html-withimg-loader

在module中的配置如下：

module:{
	rules:[
		{//压缩css和js中的图片
			test:/\.(png|jpg|gif|jpeg)/,//匹配图片文件后缀名
			use:[{
        		loader:'url-loader',//指定使用的loader和loader的配置参数
        		options:{
            		limit:5*1024,//是把小于5KB的文件打成Base64的格式，写入JS
            		outputPath:'./img/',//打包后的图片放到img文件夹下
            	}
            }]
        },
        {//html配置
        	test: /\.(htm|html)$/i,
        	use:[ 'html-withimg-loader']
        },
        ...
	]
}

6.3. 提取和压缩css

css的提取和压缩实际上用到了不同的包，前者用到extract-text-webpack-plugin、style-loader、css-loader，后者用到optimize-css-assets-webpack-plugin、cssnano和postcss-safe-parser，安装方法如下：

npm install --save-dev extract-text-webpack-plugin style-loader css-loader optimize-css-assets-webpack-plugin cssnano postcss-safe-parser

配置方法如下：

const extractTextPlugin = require('extract-text-webpack-plugin');
const indexExtractCss = new extractTextPlugin('css/[name].css');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
...
module:{
	rules:[
	{
		test:/src(\\|\/)css(\\|\/).*\.(css)$/,
		use:indexExtractCss.extract({
			fallback:"style-loader",
			use:[
			{
				loader:"css-loader",
				options:{
					// importLoaders:1
					// minimize:true
				}					
			},
			]
		})
	},
	...
	]
},
plugins:[
indexExtractCss,
new OptimizeCSSAssetsPlugin({//压缩css
    assetNameRegExp: /(?:first|second)\.css/g,  //需要根据自己打包出来的文件名来写正则匹配，这个配置是我自己的
    cssProcessor: require('cssnano'),
    cssProcessorOptions: {
    	discardComments: { removeAll: true },
    	parser: require('postcss-safe-parser'),
    	autoprefixer: false
    },
    canPrint: true
}),
]

6.4. 压缩和编译js

webpack高版本对于js的压缩其实非常简单，只需要将配置文件中的mode改为"production"即可。

js的编译则需要引入babel，为了使用ecmascript最新的标准，需要引入babel/polyfill。安装如下：

npm install --save-dev @babel/core @babel/polyfill @babel/preset-env babel-loader

使用也很容易，配置如下：

entry:{
	index:['@babel/polyfill','./src/js/first.js'],
	second:['@babel/polyfill','./src/js/second.js'],
},
module:{
	rules:[
		{
			test:/\.js$/,
			exclude: /node_modules/,//排除node_modules文件夹下的js
			loader:'babel-loader',
		}
	]
},
...

另外，在每个入口文件的文件头，引用polyfill。以first.js为例，如下所示：

import'@babel/polyfill';
...

这样就可以使用最新的API来写js代码了。👍

7. webpack打包路径问题

css中引用的img，打包后的图像路径是相对于css文件，而js或html中引用的img，打包后是相对于html的路径。为了使得打包后的图像统一放在文件夹dist/img/下，使用publicPath参数。

配置方法：

output:{
	...
	publicPath:'/'
},
...

这样的效果是将所有打包后的相对路径都替换为绝对路径/，这样无论之后发布的ip和端口怎么变，只要dist是根目录，引用就没问题。当然，如果已知ip和端口不变，也可以直接设置publicPath为’http://ip:port/’，只是这样不够灵活。

8. 网页调试

webpack可以很方便的实时打包和调试，需要安装webpack-dev-server，安装方式如下：

npm install --save-dev webpack-dev-server

在package.json中添加：

"scripts":{
	"server": "webpack-dev-server --open --hot --config=config/webpack.config.dev.js"
}

然后在webpack.config.dev.js中配置：

module.exports = {
	...
	devServer:{
		contentBase:path.resolve(__dirname,'../dist'),//设置基本目录结构，相对当前文件的路径
    	host:'localhost',//服务器的IP地址，这里先使用loaclhost地址
    	compress:true,//服务端压缩是否开启
    	port:'8888', //配置服务端口号
    },
}

运行

npm run server

就会自动在浏览器中打开网页，并且修改js文件会自动刷新网页。💚

9. 附件

9.1. webpack.config.dev.js

const webpack = require('webpack');
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
const extractTextPlugin = require('extract-text-webpack-plugin');
const indexExtractCss = new extractTextPlugin('css/[name].css');

var website = {
	publicPath:"http://localhost:8888/" //调试
}

module.exports = {
	mode: "development",//development or production
	entry:{
		index:['@babel/polyfill','./src/js/first.js'],
		second:['@babel/polyfill','./src/js/second.js'],
	},
	output: {
		filename: 'js/[name].js',
		path: path.resolve(__dirname, '../dist'),
		publicPath:website.publicPath
	},
	module:{
		rules:[
		{
			test:/\.js$/,
			exclude: /node_modules/,
			loader:'babel-loader',
		},
		{
			test:/\.(css)$/,
			use:indexExtractCss.extract({
				fallback:"style-loader",
				use:[
				{
					loader:"css-loader",				
				},
				]
			})
		},
		{
			test:/\.(png|jpg|gif|jpeg)/, //是匹配图片文件后缀名
			use:[{
        		loader:'url-loader', //指定使用的loader和loader的配置参数
        		options:{
            		limit:5*1024,  //是把小于5KB的文件打成Base64的格式，写入JS
            		outputPath:'./img/'  //打包后的图片放到img文件夹下
            	}
            }]
        },
        {
        	test: /\.(htm|html)$/i,
        	use:[ 'html-withimg-loader']
        }
        ]
    },
    plugins:[
    new htmlPlugin({
    	filename:'index.html',
		minify:{//对html文件进行压缩
	        removeAttributeQuotes:true, //removeAttrubuteQuotes是去掉属性的双引号。
	    },
   		chunks:['index'],//每个html只引入对应的js和css
   		inject:true,
	    hash:true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
	    template:'./src/index.html' //打包html模版的路径和文件名称。
	}),
    new htmlPlugin({
    	filename:'second.html',
		minify:{//对html文件进行压缩
	        removeAttributeQuotes:true, //removeAttrubuteQuotes是去掉属性的双引号。
	    },
	    chunks:['second'],
	    inject:true,
	    hash:true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
	    template:'./src/second.html' //打包html模版的路径和文件名称。
	}),
    indexExtractCss,//提取css
    ],
    devServer:{
		contentBase:path.resolve(__dirname,'../dist'),//设置基本目录结构
    	host:'localhost',//服务器的IP地址，这里先使用loaclhost地址
    	compress:true,//服务端压缩是否开启
    	port:'8888', //配置服务端口号
    },
};

9.2. webpack.config.build.js

const webpack = require('webpack');
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
const extractTextPlugin = require('extract-text-webpack-plugin');
const indexExtractCss = new extractTextPlugin('css/[name].css');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

var website = {
	publicPath:"/" 
}

module.exports = {
	mode: "production",//development or production
	entry:{
		index:['@babel/polyfill','./src/js/first.js'],
		second:['@babel/polyfill','./src/js/second.js'],
	},
	output: {
		filename: 'js/[name].js',
		path: path.resolve(__dirname, '../dist'),
		publicPath:website.publicPath
	},
	module:{
		rules:[
		{
			test:/\.js$/,
			exclude: /node_modules/,
			loader:'babel-loader',
		},
		{
			test:/\.(css)$/,
			use:indexExtractCss.extract({
				fallback:"style-loader",
				use:[
				{
					loader:"css-loader",				
				},
				]
			})
		},
		{
			test:/\.(png|jpg|gif|jpeg)/, //是匹配图片文件后缀名
			use:[{
        		loader:'url-loader', //指定使用的loader和loader的配置参数
        		options:{
            		limit:5*1024,  //是把小于5KB的文件打成Base64的格式，写入JS
            		outputPath:'./img/'  //打包后的图片放到img文件夹下
            	}
            }]
        },
        {
        	test: /\.(htm|html)$/i,
        	use:[ 'html-withimg-loader']
        }
        ]
    },
    plugins:[
    new htmlPlugin({
    	filename:'index.html',
		minify:{//对html文件进行压缩
	        removeAttributeQuotes:true, //removeAttrubuteQuotes是去掉属性的双引号。
	    },
   		chunks:['index'],//每个html只引入对应的js和css
   		inject:true,
	    hash:true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
	    template:'./src/index.html' //打包html模版的路径和文件名称。
	}),
    new htmlPlugin({
    	filename:'second.html',
		minify:{//对html文件进行压缩
	        removeAttributeQuotes:true, //removeAttrubuteQuotes是去掉属性的双引号。
	    },
	    chunks:['second'],
	    inject:true,
	    hash:true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
	    template:'./src/second.html' //打包html模版的路径和文件名称。
	}),
    indexExtractCss,//提取css
    new OptimizeCSSAssetsPlugin({//压缩css
        assetNameRegExp: /(?:index|second)\.css/g,  //需要根据自己打包出来的文件名来写正则匹配这个配置是我自己的
        cssProcessor: require('cssnano'),
        cssProcessorOptions: {
        	discardComments: { removeAll: true },
        	parser: require('postcss-safe-parser'),
        	autoprefixer: false
        },
        canPrint: true
    }),
    ],
};

9.3. package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack --config=config/webpack.config.build.js",
    "server": "webpack-dev-server --open --hot --config=config/webpack.config.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/polyfill": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "cssnano": "^4.1.10",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "html-withimg-loader": "^0.1.16",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "postcss-safe-parser": "^4.0.1",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-multiselect": "^2.1.4",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {}
}

9.4. 打包和调试命令

打包运行

npm run build

调试运行

npm run server

10. 结束语

好久没有写这么长的博文了，写完后只有两个字“舒服”。本文是笔者个人学习和实践所得，如需转载，请注明出处，谢谢！🌱

收起

展开全文

webpack4.0打包总结
千次阅读 2018-06-04 12:01:52
1.webpack概念WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。...
收起
Vue webpack 自定义打包环境和环境变量
2021-03-16 22:33:28
使用Vue-cli 创建webpack项目时，模板默认提供dev和build脚本，dev为直接在本地启动服务器，build为打包生产环境，但是有些时候我们如果想打包一个自定义的环境（预演环境）的话，需要我们自定义一个环境，借鉴网上...
收起
vue.js
Webpack打包
万次阅读 2020-02-21 18:36:50
模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。为什么使用webpack 现在是...
收起
vue项目如何使用webpack打包代码
千次阅读 2021-02-23 10:03:12
***模块打包机：***它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。为什么使用webpack 现在...
收起
vue
webpack构建之webpack打包流程到底是什么
千次阅读 2020-08-13 15:19:13
webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：首先会从配置文件和Shell语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数；初始化完成后会调用Compiler的run...
收起
vue.js reactjs es6 javascript
webpack打包配置
2020-07-07 11:28:27
在网页中会引用那些常见的静态资源？ js .js .jsx .coffee .ts(Typescript 类 C#语言) css .css .less .sass .scss images ....ejs .jade .vue[这是我们在webpack中定义组件的方式，强烈推荐]
收起
vue.js
Webpack 实践: 前端 SDK 开发（使用 webpack 打包 library）
2021-09-17 12:23:54
Webpack 实践: 前端 SDK 开发（使用 webpack 打包 library）文章目录Webpack 实践: 前端 SDK 开发（使用 webpack 打包 library）前言正文1.... 目录结构2.2 源代码扩展2.3 webpack.config.js 配置2.4 打包成果2.5 usa
收起
npm sdk babel typescript
webpack打包版本号定义
千次阅读 2017-11-16 18:01:00
首先版本号的定义是为了解决缓存的问题在编译的时候webpack提供了插件html-webpack-plugin，本文以时间作为版本号 <!DOCTYPE html> , initial-scale=1, maximum-scale=1"> , responsive, ...
收起
webpack4打包传统H5多页面
千次阅读 2020-08-01 16:52:16
1. webpack核心概念入口（entry）输出（output） loader 插件（plugins）官方文档： https://www.webpackjs.com/configuration/output/#output-filename 1.1 入口指定 webpack 由哪个模块作为项目构建的开始....
收起
javascript js es6 html5
学习使用webpack打包（打包css和高级js）
2020-07-05 14:45:56
学习使用webpack打包工具一、概念 1.什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency ...
收起
前端
webpack系列之打包原理
2021-04-27 10:38:38
为什么要使用webpack? 如今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法: 模块化，让我们可以把复杂的程序...
收起
webpack静态打包工具
2020-07-25 19:36:05
webpack 静态打包工具一、什么是 webpack？官方的解释：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency ...
收起
webpack打包配置自己的文件目录
千次阅读 2019-05-13 09:10:06
2,webpack.prod.conf.js new HtmlWebpackPlugin({ filename: 'inner-dmp/index.html' , template: 'index.html' , inject: true , ... } 复制代码 build后输入的文件目录结构 build里面html文件引入资源...
收起
webpack4打包nodejs项目进阶版——多页应用模板
2018-12-13 20:15:00
webpack4打包nodejs项目进阶版——多页应用模板前段时间我写了个打包nodejs项目的文章，点击前往但是，问题很多。因为之前的项目是个历史遗留项目，重构起来可能会爆炸，当时又比较急所以就写个...
收起
webpack打包工具
2020-11-29 08:39:04
webpack 是一个流行的前端项目构造工具（打包工具），可以解决当前web开发中面临的困境。提供了友好的模块化支持，以及代码压缩混淆，处理js 兼容问题，性能优化等强大的功能创建列表隔行变色项目创建项目空白...
收起
如何使用webpack实现模块化打包？
千次阅读 2020-07-23 15:37:39
最基本的小案例2.1生成案例结构2.2 安装webpack2.3 运行命令打包js模块文件2.4 在index.html中引入打包文件2.5 打开页面尝试3.配置webpack的打包过程3.1 enter属性3.2 output属性4.Webpack 工作模式5. 打包结果运行...
收起
前端
什么是webpack打包工具以及其优点用法
千次阅读 2019-02-19 17:38:49
webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 2、为什么要...
收起
如何优化webpack打包速度
千次阅读 2019-02-20 15:53:32
文章目录前言怎么优化webpack打包速度有些其他方法对webpack的理解对webpack了解哪些webpack的打包原理webpack的构建流程参考文章前言今天面试遇到了一个问题，先问的是怎么理解webpack的，我答了webpack的主要...
收起
webpack
千次阅读 多人点赞 2019-10-17 21:30:04
webpack的使用2.1 webpack的安装2.2 webpack的使用2.2.1 项目搭建思路2.2.2 webpack的作用2.3 webpack的配置文件webpack.config.js2.4 自定义配置文件2.5 执行webpack之后发生了什么2.6 配置多个入口...
收起
webpack: webpack简单打包后的代码(1)
2019-02-28 22:11:00
源码本文研究的源码地址为：...打包后的代码结构在有些部分也不相同，举个例子： entry 为 String 类型，我们的第一个执行模块(下面注释中可以找到)是这样子： /***...
收起
webpack3.12.0 打包工具（一些webpack常用加载器和插件的使用）
2020-12-02 11:59:47
webpack3.12.0 打包工具，初学知识点 1.初始化项目，并且下载webpack 进入项目目录，然后输入： npm init --yes 这个命令执行后，项目汇总会出现一个package.json文件，然后下载webpack： npm install webpack@...
收起
vue.js css-loader
webpack打包后的代码分析
2020-08-24 19:04:44
准备工作 1、 #创建webpackStudy目录 ...$npm install webpack webpack-cli webpack-dev-server #将webback命令和webpack-dev-server写入package.json脚本并执行 $npm run build $npm run dev 2、目
收起
前端
webpack打包+调试
千次阅读 2018-10-12 22:55:26
title: webpack打包+调试 copyright: true categories: 前端 tags: [webpack] password: 本文基于webpack4.20.2，仅讲解webpack打包操作，以及打包好的js文件的调试，一些配置或者和vue整合还是要看其它资料文章...
收起
source-map 调试
webpack4.x打包输出目录分文件夹
2021-05-28 18:57:14
webpack4.x打包输出目录分文件夹优化前优化后通过上面的优化前后对比，明显发现优化后的输出结构更加清晰；并且当我更新一个应用时，可以只发送对应的打包文件夹以及入口文件，减少发包体积；同时，...
收起

webpack5打包笔记

文章目录

webpack5是啥有啥作用

webpack安装和基本体验

一些需要了解的概念

基本体验

webpack的配置文件

配置文件中的5大核心概念

entry 和 output

单入口单出口文件

多入口单出口文件

多入口多出口文件

混合文件

打包html资源

下载 html-webpack-plugin 插件

引用插件

配置使用插件

配置插件的属性

配置多html文件打包

打包CSS资源

webpack打包less或sass资源

打包less

打包sass

效果

提取单独css文件

配置css的兼容性

压缩css

打包图片

打包其他资源

先记webpack5对比webpack4打包运行代码

使用webpack配置文件打包输入输出打包文件及自定义打包指令

Webpack4打包多页面工程基本教程——小白的填坑之旅

Webpack4打包多页面工程基本教程——小白的填坑之旅

1. 背景

2. 什么是Webpack?

3. 基本安装

4. 多文件基本结构

5. 打包配置文件

5.1. 创建配置文件

5.2. webpack.config.dev.js配置文件

5.2.1. entry

5.2.2. output

5.2.3. module

5.2.4. plugins

5.3. webpack.config.build.js配置文件

6. 压缩文件

6.1. 压缩html

6.2. 压缩图片

6.3. 提取和压缩css

6.4. 压缩和编译js

7. webpack打包路径问题

8. 网页调试

9. 附件

9.1. webpack.config.dev.js

9.2. webpack.config.build.js

9.3. package.json

9.4. 打包和调试命令

10. 结束语

webpack4.0打包总结

Vue webpack 自定义打包环境和环境变量

Webpack打包

vue项目如何使用webpack打包代码

webpack构建之webpack打包流程到底是什么

webpack打包配置

Webpack 实践: 前端 SDK 开发（使用 webpack 打包 library）

webpack打包版本号定义

webpack4打包传统H5多页面

学习使用webpack打包（打包css和高级js）

webpack系列之打包原理

webpack静态打包工具

webpack打包配置自己的文件目录

webpack4打包nodejs项目进阶版——多页应用模板

webpack打包工具

如何使用webpack实现模块化打包？

什么是webpack打包工具以及其优点用法

如何优化webpack打包速度

webpack

webpack: webpack简单打包后的代码(1)

webpack3.12.0 打包工具（一些webpack常用加载器和插件的使用）

webpack打包后的代码分析