webpack入门系列

_在掘金43335
488 阅读1分钟

唯一入口文件：entry

  • entry：入口文件
  • output：输出文件
    • output是一个对象，可以配置很多属性，基础属性是 filename
module.exports = {
	entry: './index.js',
	output: {
		filename: './bundle.js'
	}
}

多入口文件

  • entry：多入口文件下，entry是一个对象
  • output：filename应该是一个变量 [name]
module.exports = {
	entry: {
		bundle1: './index.js',
		bundle2: './main.js'
	},
	output: {
		filename: '[name].js' // 输出文件名
	}
}

Babel-loader

  • babel-loader是一个加载器，将非JS文件转换为JS
  • 通常需要Babel的预设插件，如babel-preset-*, babel-preset-react等
module.exports = {
	entry: {
		bundle1: './index.js',
		bundle2: './main.js'
	},
	output: {
		filename: '[name].js' // 输出文件名
	},
	module: {
		rules: [
			{
				test: /\.js?$/, // 解析的文件名
                                include: [     // 解析的路径
                                    path.resolve(__dirname, 'src')
                                ],
                                exclude: /(node_modules)/, // 不加载的路径 
                                loader: 'babel-loader', //处理器
                                options: {  // 配置的预处理器
                                    presets: ['babel-preset-react']
                                }
			}
		]
	}
}

CSS-loader

  • Webpack允许你在JS文件中包含CSS，然后用css-loader预处理css文件
  • css-loader必须配置 style-loader 处理器（样式加载器，将style标签插入到文件中）
module.exports = {
	entry: {
		bundle1: './index.js',
		bundle2: './main.js'
	},
	output: {
		filename: '[name].js' // 输出文件名
	},
	module: {
		rules: [
			{
				   test: /\.css$/,
				   include: [     // 解析的路径
                                        path.resolve(__dirname, 'src')
                                    ],
                                    use: [
                                        require.resolve('style-loader'),
                                        {
                                            loader: require.resolve('css-loader'),
                                            options: {
                                                importLoaders: 1
                                            }
                                        }
                                    ]
			}
		]
	}
}

Image Loader

  • 解析项目中的图片：url-loader
    • url-loader，类似file-loader，但是在文件大小低于限制时，可以返回一个DataURL，将文件用base64嵌入到html中
  • 将image文件，转换为<img>标签，生成一个静态资源路径，供项目引用
module.exports = {
	entry: {
		bundle1: './index.js',
		bundle2: './main.js'
	},
	output: {
		filename: '[name].js' // 输出文件名
	},
	module: {
		rules: [
                   {
                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                        loader: require.resolve('url-loader')
                    }
		]
	}
}

CSS Modules

  • 每一个loader中都有许多配置选项Option，具体功能可查看官方文档
  • css-loader 有一个配置选项是 ?modules
    • 功能：CSS Module带给你的JS文件模块中的CSS一个局部作用域
    • global(css selector)：让CSS变为全局作用
...
	module: {
		rules: [
			{
				   test: /\.css$/,
				   include: [     // 解析src/文件夹下的css文件
                                        path.resolve(__dirname, 'src')
                                    ],
                                    use: [
                                        { loader: 'style-loader' },
                                        {
                                            loader: 'css-loader',
                                            options: {
                                                modules: true
                                            }
                                        }
                                    ]
			}
		]
	}
...

Uglify JS Plugin

  • 功能：压缩JS文件体积
  • 位置：uglifyJsPlugin属于插件，在webpack4中，已经将它集成为默认属性，在product环境下，自动开启。development环境下，可以启用 --optimize.minimize
const webpack = require('webpack');
const UglifyJsPlugin = require('uglify-webpack-plugin');

module.exports = {
	entry: 'index.js',
	output: {
		filename: bundle.js
	},
	modules: {
		...
	},
	plugins: [
		new UglifyJsPlugin()
	]
}
...

HtmlWebpackPlugin

  • 功能：为每一个入口文件，创建一个html文件（多个入口文件，需要引用多次htmlWebpackPlugin）
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: 'index.js',
	output: {
		filename: bundle.js
	},
	modules: {
		...
	},
	plugins: [
		new HtmlWebpackPlugin({
		    title: 'webpackDemo',
		    filename: 'index.html'
		}),
	]
}
...

OpenBrowserWebpackPlugin

  • 功能：webpack运行时，自动打开一个新的浏览器标签
const webpack = require('webpack');
const OpenBrowserWebpackPlugin = require('open-browser-webpack-plugin');

module.exports = {
	entry: 'index.js',
	output: {
		filename: bundle.js
	},
	modules: {
		...
	},
	plugins: [
		new OpenBrowserWebpackPlugin({
                    url: 'http://localhost:8080'
		}),
	]
}

CommonsChunkPlugin

  • 功能：提取不同js文件中的公用部分，可以将公用部分进行缓存，节省浏览器带宽
  • 如：多入口文件项目，每个项目中都包含 react\react-dom等公用部分，就可以将 react/react-dom部分提取为 commons.js文件，在浏览器中缓存
  • webpack4中，CommonsChunkPlugin已经废弃，改为 splitChunksPlugin和 runtimePlugin
const webpack = require('webpack');

module.exports = {
	entry: {
		bundle1: 'index1.js',
		bundle2: 'index2.js'
	},
	output: {
		filename: '[name].js'
	},
	modules: {
		...
	},
	plugins: [
		new webpack.optimize.CommonsChunkPlugin({
                    name: 'commons',
                    filename: 'commons.js'
		})
	]
}

Vendor\ProvidePlugin

  • vendor：作为entry的属性，告诉webpack，vendor中的库应该被加载到commons公用模块中，通常配合CommonsChunkPlugin使用
  • 下面代码就是将 jquey库 作为公用代码，打包进common.js文件中
const webpack = reuiqre('webpack');

module.exports = {
	entry: {
		app: 'index.js',
		vendor: ['jquery']
	},
	output: {
		filename: '[name].js'
	},
	plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'common',
                filename: 'common.js'
            })
	]
}
  • ProvidePlugin：将一个模块作为全局变量引用，不再需要在每个文件中require()
    • 比如jquery库，让 $ 或 jquery 作为全局变量，不用在每个文件中单独引用
const webpack = reuiqre('webpack');

module.exports = {
	entry: {
		app: 'index.js'
	},
	output: {
		filename: '[name].js'
	},
	plugins: [
            new webpack.providePlugin({
                $: 'jquery'
            })
	]
}

公开全局变量--externals

  • 防止将某些 import的包，打包到bundle中，而是在运行时再去外部获取这些依赖
  • 优点：加快打包速度，减少打包体积
avatar
文章
阅读
粉丝