webpack配置详解

01.基本概念

入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

输出(output)

output属性告诉 webpack 在哪里输出它所创建的bundles,以及如何命名这些文件,默认值为./dist。

加载程序loader

loader让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

插件(plugins)

loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

02.配置结构

//webpack.config.js

module.exports= {

entry: ”, // 入口配置

output: {}, // 输出配置

module: {}, // 放置loader加载器,webpack本身只能打包commonjs规范的js文件,用于处理其他文件或语法

plugins: [], // 插件,扩展功能

// 以下内容进阶篇再涉及

resolve: {}, // 为引入的模块起别名

devServer: {} // webpack-dev-server

};

03.基本功能

3.1输入/输出配置

entry传入数组相当于将数组内所有文件都打包到bundle.js中。

outpu指定输出文件名,输出的路径

constpath = require(‘path’);

module.exports= {

entry: [‘./src/index.js’,’./src/index2.js’], // 入口文件

output: {

filename: ‘bundle.js’, // 打包输出文件名

path: path.join(__dirname,’./dist’) // 打包输出路径(必须绝对路径,否则报错)

}

};

3.2 清空某目录或子目录及文件

npminstall -D clean-webpack-plugin

//webpack.config.js

constCleanWebpackPlugin = require(‘clean-webpack-plugin’);

constcdnDir = path.resolve(__dirname, ‘../../../’, ‘imgcache.gtimg.cn/vip/’)

module.exports= {

plugins: [

new CleanWebpackPlugin([‘dist’]),// 清空项目根目录下dist

]

};

3.3html自动构建

npminstall html-webpack-plugin -D

module.exports = {

plugins: [

new HtmlWebpackPlugin({

filename:path.join(__dirname, ‘entry.html’),

// 生成的html(绝对路径:可用于生成到根目录)

filename: ‘html/entry.html’,

// 生成的html文件名(相对路径:将生成到output.path指定的dist目录下)

template: ‘./src/index.html’ // 以哪个文件作为模板,不指定的话用默认的空模板

})

]

};

3.4CSS处理——内联

npminstall -D css-loader # 负责处理其中的@import和url()

npminstall -D style-loader # 负责内联

npminstall -D less less-loader # less编译,处理less文件

module配置

//index.js

import’./style/index.css’;

import’./style/test.less’;

//webpack.config.js

module.exports= {

module: {

rules: [

{

test: /.css$/,

// 从右到左,loader安装后无需引入可直接使用

use: [‘style-loader’,’css-loader’]

},

{

test: /.less$/,

use: [

{loader: ‘style-loader’},

{loader: ‘css-loader’},

{loader: ‘less-loader’}

]

}

]

}

};

3.5 CSS处理——合并抽离

npminstall -D extract-text-webpack-plugin@next

constExtractTextPlugin = require(‘extract-text-webpack-plugin’);

// 实例化1:用于CSS

constextractCSS = new ExtractTextPlugin({

disable: process.env.NODE_ENV ==’development’ ? true : false, // 开发环境下直接内联,不抽离

filename: ‘style/extractFromCss.css’, // 单个entry时,可写死

filename: ‘style/[name].css’, // 多entry时

});

// 实例化2:用于LESS

constextractLESS = new ExtractTextPlugin({省略…});

module.exports= {

module: {

rules: [

{

test: /.css$/,

use:extractCSS.extract({

fallback: ‘style-loader’,

use: ‘css-loader’

})

},

{

test: /.less$/,

use: extractLESS.extract({

fallback: ‘style-loader’,

use: [‘css-loader’,’less-loader’]

})

}

]

},

plugins: [extractCSS, extractLESS]

};

3.6图片(字体/svg)处理

npminstall -D url-loader file-loader

3.7ES6转义

npminstall -D babel-core babel-loader babel-preset-env babel-preset-stage-0

babel-core核心包

babel-loader

babel-preset-env定案内语法编译 (babel-preset-es2015已废弃)

babel-preset-stage-0预案内语法编译

/webpack.config.js

module: {

rules: [

{

test: /.js$/,

exclude: /node_modules/, // npm包不做处理

include: /src/, // 只处理src里面的

use: {

loader: ‘babel-loader’,

options: {

presets: [‘env’, ‘stage-0’] // 【重要】顺序右到左,先处理高级或特殊语法

}

}

}

]

}

3.8webpack-dev-server

npminstall -D webpack-dev-server

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包

contentBase

用于告诉服务器文件的根目录。这主要用来需要引用静态文件的时候。

host

设置服务器的主机号,默认是localhost,但是可以自己进行设置,如:

host:”0.0.0.0″

port

设置端口号,如下面的7000

devServer:{

port:7000

}

hot 和 inline

自动刷新和模块热替换机制

注意,如果你的项目中使用了热模块替换机制,HotModuleReplacementPlugin插件会自动添加到项目中,而不需要再在配置文件中做添加。

webpack-dev-server有两种模式可以实现自动刷新和模块热替换机制

1. Iframemode(默认,无需配置)

页面被嵌入在一个iframe里面,并且在模块变化的时候重载页面

2.inlinemode(需配置)添加到bundle.js中

当刷新页面的时候,一个小型的客户端被添加到webpack.config.js的入口文件中

proxy

重定向是解决跨域的好办法,当后端的接口拥有独立的API,而前端想在同一个domain下访问接口的时候,可以通过设置proxy实现。

如果后端接口地址是192.168.10.10:1000,你可以这样设置:

proxy: {

“/api”:”https://192.168.10.10:1000″

}

publicPath

用于设置编译后文件的路径,假设服务器的运行地址是https://localhost:8080,输出文件名设置为bundle.js,那么默认情况下publicPath是”/”。

04.开发/生产环境

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot modulereplacement)能力的 source map 和localhost server。而在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。

npminstall –save-dev webpack-merge

project

webpack-demo

|- package.json

|- webpack.common.js

|- webpack.dev.js

|- webpack.prod.js

|- /dist

|- /node_modules

webpack.common.js

const path = require(‘path’);

const CleanWebpackPlugin =require(‘clean-webpack-plugin’);

const HtmlWebpackPlugin =require(‘html-webpack-plugin’);

module.exports = {

entry: {

app: ‘./src/index.js’

},

plugins: [

new CleanWebpackPlugin([‘dist’]),

new HtmlWebpackPlugin({

title: ‘Production’

})

],

output: {

filename: ‘[name].bundle.js’,

path: path.resolve(__dirname, ‘dist’)

}

};

webpack.dev.js

const merge = require(‘webpack-merge’);

const common = require(‘./webpack.common.js’);

module.exports = merge(common, {

plugins: [

]

});

webpack.prod.js

const merge = require(‘webpack-merge’);

const UglifyJSPlugin =require(‘uglifyjs-webpack-plugin’);

const common = require(‘./webpack.common.js’);

module.exports = merge(common, {

plugins: [

]

});

4.1 NPMScripts

现在,我们把scripts重新指向到新配置。我们将npmstart定义为开发环境脚本,并在其中使用webpack-dev-server,将npm run build定义为生产环境脚本:

package.json

{

“name”: “development”,

“version”: “1.0.0”,

“description”: “”,

“main”: “webpack.config.js”,

“scripts”: {

“start”:”webpack-dev-server –open –config webpack.dev.js”,

“build”: “webpack –configwebpack.prod.js”

},

“keywords”: [],

“author”: “”,

“license”: “ISC”,

“devDependencies”: {

“clean-webpack-plugin”:”^0.1.17″,

“css-loader”:”^0.28.4″,

“csv-loader”:”^2.1.1″,

“express”: “^4.15.3”,

“file-loader”:”^0.11.2″,

“html-webpack-plugin”:”^2.29.0″,

“style-loader”:”^0.18.2″,

“webpack”: “^3.0.0”,

“webpack-dev-middleware”:”^1.12.0″,

“webpack-dev-server”:”^2.9.1″,

“webpack-merge”:”^4.1.0″,

“xml-loader”:”^1.2.1″

}

}