一、entry
单页应用程序的入口配置一般如下所示：
entry: __dirname + "/src/category/demo1/demo1.js"
这个配置就是指定 webpack从 /src/category/demo1/demo1.js这个文件开始进入，进行一系列的打包编译过程。
多入口文件的entry配置是对象的形式
entry: {
demo1:__dirname + "/src/category/demo1/demo1.js",
demo2:__dirname + "/src/category/demo2/demo2.js"
}
二、output
output: {
libraryTarget: 'umd',
path:__dirname +'/dist/',//打包后的文件存放的地方
filename: "[name].js"//打包后输出文件的文件名
}
三、使用webpack-dev-server构建本地服务器
效果：浏览器监听你的代码的变更，并自动刷新显示修改后的结果
npm install --save-dev webpack-dev-server
配置文件 webpack.config.js 配置如下
module.exports={
devtool: 'eval-source-map',
entry: __dirname + "/src/category/demo2/pdf.js",
output: {
libraryTarget: 'umd',
path:__dirname +'/dist/',
filename: "[name].js"
},
devServer: {
contentBase: "./src",//本地服务器所加载的页面所在的目录
port:"8080",//设置监听端口
historyApiFallback: true,//不跳转
inline: true//源文件变更时，实时刷新
}
};
在package.json中的scripts对象中添加如下命令，用以开启本地服务器和webpack打包：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack", //打包命令
"server": "webpack-dev-server --open" //开启本地服务
}
四、Loaders
Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。
Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置
1、babel解析
安装依赖
"devDependencies": {
"@babel/core": "^7.3.4", //核心功能模块
"@babel/plugin-transform-runtime": "^7.3.4",
"@babel/preset-env": "^7.3.4", //解析Es6
"@babel/preset-react": "^7.0.0", //解析JSX
"babel-loader": "^8.0.5"
}
webpack.config.js中的配置如下：
module: {
rules: [
{
test:/(\.jsx|\.js)$/,
use:{loader:"babel-loader"},
exclude:/node_modules/
}
]
}
Babel其实可以完全在 webpack.config.js 中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。
例如在.babelrc中做如下配置：
{
"presets":["es2015","react","stage-1"],
"plugins": [["import", {
"libraryName": "cheui-react",
"libraryDirectory": "lib/components",
"camel2DashComponentName": true
}]]
}
2、css文件解析
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options:{
modules:true, //指定启用css modules
localIdentName: '[name]__[local]--[hash:base64:5]'// 指定css的类名格式
}
}
]
}
]
}
Webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，这样做有效避免了全局污染
3、CSS预处理器
处理less需要依赖less-loader
处理scss需要依赖sass-loader，其中sass-loader依赖于node-sass
通过上述预处理器可以将less、scss这些特殊类型的语句转化为浏览器可识别的CSS语句
4、css文件单独打包
webpack版本 < 4 时 通过extract-text-webpack-plugin插件
webpack版本 = 4 时 通过mini-css-extract-plugin插件
注意extract-text-webpack-plugin next版本 也可以支持webpack4
npm install --save-dev extract-text-webpack-plugin@next
5、添加CSS3前缀
npm install autoprefixer postcss postcss-loader postcss-sprites
webpack.config.js 解决上述3、4、5需求的配置如下：
module: {
rules: [
{
test:/\.(le|c|sc)ss$/,
use:[
{ loader: MiniCssExtractPlugin.loader },
{loader: "css-loader"},
{
loader: "postcss-loader",
options: {
ident:'postcss',
plugins: [
require("autoprefixer")({
browsers:'last 100 versions'
})
]
}
},
{loader: "less-loader"},
{loader: "sass-loader"}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
})
]
6、图片处理
前端项目中除了html、css、js，不可避免地要处理图片文件，webpack打包图片文件是通过file-loader、url-loader、img-loader、html-loader处理的。
file-loader :对文件进行处理 （如：打包图片文件等）
url-loader : url-loader中内置了 file-loader，url-loader可以将指定大小及以下的图片文件转成base64写入js，避免额外请求图片资源，如果超过指定大小再使用file-loader打包图片文件。
img-loader: 作用是对图片进行压缩
常用的三种加载图片的方式:
css中引入
.car1{
background: url('./assets/img/gongchengc_icon@2x.png')
}
.car2{
background: url('./assets/img/huochec_icon@2x.png')
}
.car3{
background: url('./assets/img/kechec_icon@2x.png')
}
js引入
let imgSrc = require('./assets/img/huochec_icon@2x.png');
class Home extends Component{
render() {
return (
<div onClick={()=>{console.log('1')}} className="root">
测试内容xia
<div className="test">
测试内容xia1
</div>
<img src={imgSrc} alt=""/>
<Test/>
</div>
)}
}
这两种 使用 file-loader 或 url-loader可以解决
html中引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<img src="./category/demo2/assets/img/u175.png"/>
</body>
</html>
要处理html中的图片，需要使用其html-loader,具体配置如下：
module: {
rules: [
{
test:/\.(png|jpg|gif|jpeg)$/,
use:[
{
loader:'url-loader',
options:{
name:'[name].[ext]', //图片打包后文件名
outputPath:'images', //图片打包后存放的目录
limit:1000, //小于1000字节的图片自动转成base64格式，且不会存在实体图片
publicPath: current_env === "development" ? "" :"https://img.58cdn.con.cn/img/"
}
},
{
loader:'img-loader',
options:{
pngquant:{
quality:80
}
}
}
]
},
{
test: /\.html$/,
use: {
loader: 'html-loader'
}
}
]
},
五、插件（Plugins）
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，scss，less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。
要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例
1、给打包后代码 添加版权声明的插件
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究')
]
2、html-webpack-plugin
这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
npm install --save-dev html-webpack-plugin
在src目录下，创建一个index.html文件模板，这个模板包含title等必须元素，在编译过程中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件
更新webpack的配置文件
plugins: [
new HtmlWebpackPlugin({
template:__dirname + "/src/index.html"})
]
