概念
webpack是一个现代javascript应用程序的模块打包器。
当webpack处理你的应用程序时,它会递归构建一个依赖图(包含了你的应用程序所需要每个模块),然后把这些模块打包到少数几个budle文件中(通常是只有一个,会被浏览器加载,根据项目情况而定)。
这是令人难以置信的配置,但开始前,你只需要明白四个核心概念:entry、output、loaders、和plugins。
配置对象选项
webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | const path = require ( 'path' );
module.exports = {
entry: "./app/entry" ,
output: {
path: path.resolve(__dirname, "dist" ),
filename: "bundle.js?1.1.11" ,
publicPath: "/assets/" ,
library: "MyLibrary" ,
libraryTarget: "umd" ,
},
module: {
rules: [
{
test: /\.jsx?$/,
include : [
path.resolve(__dirname, "app" )
],
exclude: [
path.resolve(__dirname, "app/demo-files" )
],
issuer: { test, include , exclude },
enforce: "pre" ,
enforce: "post" ,
loader: "babel-loader" ,
options: {
presets: [ "es2015" ]
},
},
{
test: "\.html$" ,
use : [
"htmllint-loader" ,
{
loader: "html-loader" ,
options: {
}
}
]
},
{ oneOf: [ ] },
{ rules: [ ] },
{ resource: { and : [ ] } },
{ resource: { or : [ ] } },
{ resource: [ ] },
{ resource: { not: } }
],
},
resolve: {
modules: [
"node_modules" ,
path.resolve(__dirname, "app" )
],
extensions: [ ".js?1.1.11" , ".json" , ".jsx" , ".css?1.1.11" ],
alias: {
"module" : "new-module" ,
"only-module$" : "new-module" ,
"module" : path.resolve(__dirname, "app/third/module.js?1.1.11" ),
},
},
performance: {
hints: "warning" ,
maxAssetSize: 200000,
maxEntrypointSize: 400000,
assetFilter: function (assetFilename) {
return assetFilename.endsWith( '.css' ) || assetFilename.endsWith( '.js' );
}
},
devtool: "source-map" ,
context: __dirname,
target: "web" ,
externals: [ "react" , /^@angular\
stats: "errors-only" ,
devServer: {
proxy: {
'/api' : 'http://localhost:3000'
},
contentBase: path.join(__dirname, 'public' ),
compress: true,
historyApiFallback: true,
hot: true,
https: false,
noInfo: true,
},
plugins: [
],
}
|
Salin selepas log masuk
本文档的目的是给这些概念提供一个高层次的大纲,同时提供链接给详细概念的指定用例。
Entry
webpack会创建一个你所有应用程序的依赖图。这个依赖图的起始点就是已知的entry(入口)点。这个入口点告诉webpack从哪开始,并且根据已知依赖图进行打包。你可以把应用程序的入口点当作上下文根或启动你的应用程序的第一个文件。
在webpack配置对象的entry属性中定义入口点。简单示例如下:
1 2 3 | module.exports = {
entry: './path/to/my/entry/file.js'
};
|
Salin selepas log masuk
有几种方式声明entry属性:
1、单个entry语法
1 2 3 4 5 | const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
|
Salin selepas log masuk
2、对象语法
1 2 3 4 5 6 | const config = {
entry: {
app: './src/app.js' ,
vendors: './src/vendors.js'
}
};
|
Salin selepas log masuk
3、多页面应用
1 2 3 4 5 6 7 | const config = {
entry: {
pageOne: './src/pageOne/index.js' ,
pageTwo: './src/pageTwo/index.js' ,
pageThree: './src/pageThree/index.js'
}
};
|
Salin selepas log masuk
Output
一旦你打包所有代码,你仍需要告诉webpack打包到哪里去。output属性会告诉webpack如何对待你的代码。
1 2 3 4 5 6 7 8 9 | const path = require ( 'path' );
module.exports = {
entry: './path/to/my/entry/file.js' ,
output: {
path: path.resolve(__dirname, 'dist' ),
filename: 'my-first-webpack.bundle.js'
}
};
|
Salin selepas log masuk
以上这个例子,我们使用output.filename
和output.path
属性告诉webpack打包的文件名和路径
更多配置项
Loaders
这个配置项的目的是让webpack关注你项目的所有代码而非浏览器(这并不意味着它们会被打包到一起)。webpack把每一个文件(.css, .html, .scss, .jpg, etc.)作为一个模块。然而,webpack只知道javascript。
webpack中的Loaders会转换这些文件到模块中,并添加到你的依赖图中。
在一个较高的水平,在你的webpack配置中有两个目的:
1、标识什么文件应该用一个确定的loader来转换。
2、转换后的文件可以被添加到你的依赖图中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const path = require ( 'path' );
const config = {
entry: './path/to/my/entry/file.js' ,
output: {
path: path.resolve(__dirname, 'dist' ),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{test: /\.(js|jsx)$/, use : 'babel-loader' }
]
}
};
module.exports = config;
|
Salin selepas log masuk
以上这个配置定义了一个rulues属性,用以给一个单独的模块,这个模块带有两个属性:test和use。这告诉webpack编译如下事情:
当使用require()或import语句时,路径中后缀名为.js或.jsx的文件,使用babel-loader来转换并打包。
更多配置项
Plugins
因为加载器只执行基于每个文件的转换,插件是最常用的(但不限于)优化行为,并且你可以自定义函数在你打包模块的编辑或块中(等等)。
该webpack插件系统极其强大,可定制。
为了使用一个插件,你只需要require()并添加到插件数组中。更多插件可通过选项自定义。由于你可以在一个配置中多次使用插件来达到不同的目的,因此你需要创建一个新的实例。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | const HtmlWebpackPlugin = require ( 'html-webpack-plugin' );
const webpack = require ( 'webpack' );
const path = require ( 'path' );
const config = {
entry: './path/to/my/entry/file.js' ,
output: {
path: path.resolve(__dirname, 'dist' ),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{test: /\.txt$/, use : 'raw-loader' }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html' })
]
};
module.exports = config;
|
Salin selepas log masuk
webpack提供有许多开箱插件!可以从我们的插件列表中获得更多信息。
在webpack配置中使用插件是简单的,然而有许多用法值得进一步探讨。
更多配置项
简单示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | var path = require ( 'path' );
var webpack = require ( 'webpack' );
var env = process.env.NODE_DEV;
var config = {
entry: {
consumer: './consumer/index.js' ,
admin: './admin/index.js' ,
},
output: {
path: path.resolve(__dirname, 'dist' ),
publicPath: '/dist/' ,
filename: '[name].bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.less$/, loader: 'less-loader!style-loader!css-loader' },
{ test: /\.sass$/, loader: 'sass-loader!style-loader!css-loader' },
{ test: /\.(woff|woff2|eot|ttf|otf)$/i, loader: 'url-loader?limit=8192&name=[name].[ext]' },
{ test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url-loader?limit=8192&name=[name].[ext]' },
{
test: /\.jsx?$/,
loader: 'babel-loader' ,
exclude: /node_modules/,
include : __dirname,
options: {
presets: [ 'es2015' , 'react' ]
},
},
{
test: /\.tsx?$/,
loader: 'ts-loader' ,
exclude: /node_modules/,
include : __dirname
},
{
test: /\.coffee$/,
loader: 'coffee-loader' ,
exclude: /node_modules/,
include : __dirname
}
]
},
context: __dirname,
resolve: {
extensions: [ '.js' , '.jsx' , '.json' , '.ts' , '.tsx' , '.css' ]
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery' ,
jQuery: 'jquery' ,
'window.jQuery' : 'jquery' ,
'window.$' : 'jquery' ,
'React' : 'react' ,
'ReactDOM' : 'react-dom'
}),
],
externals: {
jquery: 'jQuery' ,
react: 'React' ,
'react-dom' : 'ReactDOM'
}
};
if (env === 'production' ) {
config.plugins.push( new webpack.optimize.UglifyJsPlugin({
mangle: {
except: [ '$super' , '$' , 'exports' , 'require' ]
},
compress: {
warnings: false
}
}));
config.plugins.push( new webpack.DefinePlugin({
'process.env' : {
NODE_ENV: JSON.stringify( 'production' )
}
}));
}
module.exports = config;
|
Salin selepas log masuk
Atas ialah kandungan terperinci webpack打包器的简单介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!