以下webpack的配置在webpack.config.js中进行
js文件处理
一、js文件的打包
- 单文件打包
moudle.exports = {
// 入口文件
entry: './main.js',
// 出口文件
output: {
filename: 'bundle.js'
}
};
打包生成一个bundle.js文件
- 多文件打包
moudle.exports = {
// 入口文件
entry: {
bundle1: 'main1.js',
bundle2: 'main2.js'
},
// 出口文件
output: {
filename: '[name].js'
}
}
打包生成bundle1和bundle2两个js文件
二、jsx/es6代码的翻译
使用Babel-loader可以翻译jsx/es6代码，使其可以被浏览器识别
moudle.exports = {
// 入口文件
entry: 'main.jsx',
// 出口文件
output: {
filename: 'bundle.js'
},
// webpack自带模块
module: {
// 规则
rules: [
// 规则设置
{
// 匹配使用该规则的文件
test: /\.jsx?$/,
// 匹配文件中不使用该规则的文件
exclude: /node_modules/,
// 规则内容(loader)
use: {
// 使用babel-loader进行代码的翻译
loader: 'babel-loader',
options: {
// 使用es2015和react预处理
presets: ['es2015', 'react']
}
}
}
]
}
}
打包生成bundle.js，其中内容是main.jsx翻译生成的js代码。
三、js代码的压缩
使用webpack的uglifyis插件进行js代码的压缩
var webpack = require('webpack');
// 导入插件
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
// 插件配置
plugins: [
new UglifyJsPlugin()
]
};
打包生成压缩后的bundle.js文件
css文件处理
一、js引用css文件
css-loader允许在js文件中导入css文件，比如:
require('main.css');
import 'main.css';
而style-loader会把引用的css文件样式用style标签的形式插入相应页面中。
现在假设main.js引用了main.css文件，index.html使用打包后的bundle.js文件
moudle.exports = {
// 入口文件
entry: 'main.js',
// 出口文件
output: {
filename: 'bundle.js'
},
// 模块设置
moudle: {
rules: [
{
text: /\.css$/,
// 规则内容
use: ['style-loader', 'css-loader']
}
]
}
}
打包生成的bundle.js会存在将main.css以内联样式形式插入到引用它的页面的逻辑。那么index.html使用了这些样式。
二、css模块化
css-loader加载器允许css的模块化
基本上，它遵循下面规则：
普通的css选择器或者:local修饰，作用域范围是导入它的js文件。
用:global修饰，作用域范围是全局
.h2{
color: red;
}
:local .h2{
color: red;
}
:local(.h2){
color: red;
}
:global .h2{
color: green;
}
:global(.h2){
color: green;
}
上面的css文件，没有修饰符的、:local修饰和:local()修饰的都是随机生成一个类名，这个类名和引用它的css中的.h2匹配；而:global和:global()修饰的都是生成.h2选择器。
注意：尽管修饰符后面有没有括号有些时候效果十分相似，都是它们还是有所不同：带括号的修饰符只能修饰类名
:global(.class1 .class2 ...)，而:global可以修饰所有的选择器。
设置：
module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
// 允许css模块化
modules: true
}
}
]
}
]
}
};
图片文件处理
一、js引用图片文件
url-loader允许js文件引用图片文件，比如：
var image = document.createElement('img');
image.src = require('./logo.jpg');
document.body.appendChild(image);
配置文件：
moudle.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
moudle: {
rules: [
{
test: /\.(png | jpg)$/,
use: [
loaders: 'url-loader',
options: {
// 限制图片大小为8192个bytes
limit: 8192
}
]
}
]
}
}
打包生成的bundle.js文件具有生成图片元素的逻辑，
值得注意的是，limit字段限制图片的大小，如果超过了这个值，图片元素的src就会变成：data:image/png;base64,iVBOR...uQmCC的形式。
html文件的处理
一、index.html的自动生成
使用html插件自动生成index.html
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [
new HtmlwebpackPlugin({
title: 'Webpack-demos',
filename: 'index.html'
})
]
};
打包生成引入bundle.js的index.html文件
开发环境的处理
一、自动监听浏览器
使用open-browser插件可以自动打开浏览器并监听内容的变化而自动刷新。
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [
new OpenBrowserPlugin({
url: 'http://localhost:8080'
})
]
};
二、使某些代码只在开发环境执行
var webpack = require('webpack');
// 使用DefinePlugin定义区分开发环境和发布环境的常量
// process是node.js的进程对象
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [devFlagPlugin]
};
在main.js中，将只在开发环境运行的代码使用if语句区分：
if(__DEV__){
// 这些代码只在开发环境执行
}