前面简单了解了webpack4的安装、入口、输出、以及插件，似乎webpack是通过这个入口文件以及各种插件的配置将各种依赖关系（例如前面的html和js之间的关系）整理后输出，成为一个经过优化了的项目，其实这就是webpack的本质，只不过我们的例子非常简单没有体现出webpack的强大而已。
一、整理项目
前面我们的项目建立的相对随意，现在我们把项目的目录规整以下，让他尽量的符合规范一些。项目结构如下：
从图中我们看出src目录我们将资源分了类，有js文件夹、less文件夹、imgs文件夹，分别对应各自类型的文件。这时输出也应该是这样的结构，所以webpack.config.js也需要做相应的调整，主要是路径的调整，代码如下：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode:"development",
entry:{
"common":"./src/js/common.js",
"index":"./src/js/index.js",
"login":"./src/js/login.js"
},
output:{
filename:"js/[name].js",
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:["common","index"],
hash:true
}),
new HtmlWebpackPlugin({
template:'./src/login.html',
filename:'login.html',
chunks:["common","login"],
hash:true
})
]
}
入口对应的是各自目录下的js文件，输出的话filename看起来像路径，其实这种写法也是可以的，webpack会自动在默认的dist目录下创建js文件夹以及js文件。
其实output项中有一个path配置项，这个配置项是定义所有输出文件的根目录，不能定义子目录。
再来看mode:"development"这项设置，这个是告诉webpack现在的开发模式是什么，他的值有两个一个是development，一个是production，如果使用production那么webpack在处理时会启用自己的一些插件对项目进行优化，例如压缩js文件，意思就是如果设置成production的话打包后的js就已经时经过压缩的文件了，不用在特意安装针对js的压缩插件了。
我们前面一直在运行ngx webpack命令时，命令行工具中老是有一段黄色的警告其实就是因为没有设置它而产生的。
二、添加样式使用loader
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。loader 可以将文件从不同的语言（如 typescript）转换为 javascript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import css文件！
下面我们要给项目中的页面添加样式，这个样式是使用less写的，我们不光要使less文件打包成css文件，还要在js模块中引入css，不在像以前一样直接在html页面中link样式了，因为webpack就是处理这些资源依赖关系的。less文件内容如下：
@base-color:red;
body{
color:@base-color;
}
处理上面的这些问题，我们需要一系列的loader，首先需要将less转换成css 需要less，加载less文件又需要less-loader。
我们在index.js中使用的是 import "../less/index.less"; 来引入的css，所以需要css-loader。index.js内容如下：
import "../less/index.less";
console.log('index');
将样式写入页面又需要style-loader。
所以我们需要安装less、less-loader、css-loader、style-loader。安装命令如下：
cnpm install less less-loader css-loader style-loader --save-dev
然后修改webpack.config.js，内容如下：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode:"development",
entry:{
"common":"./src/js/common.js",
"index":"./src/js/index.js",
"login":"./src/js/login.js"
},
output:{
filename:"js/[name].js",
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:["common","index"],
hash:true
}),
new HtmlWebpackPlugin({
template:'./src/login.html',
filename:'login.html',
chunks:["common","login"],
hash:true
})
],
module:{
rules:[
{
test:/\.less$/,
use:[
{loader:"style-loader"},
{loader:"css-loader"},
{loader:"less-loader"}
]
}
]
}
}
我们将这些处理的内容写到module的配置中，下面定义了一个规则，意思就是遇到以.less为结尾的文件名时使用下面的loader来处理。
然后命令行中运行如下命令：
npx webpack
我们会发现样式确实添加到了页面中，但是这个样式是以style的方式添加到index.html文件中的，如下图：
从上面的过程中我们可以理解，各种loader 就是让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript），loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后在利用 webpack 的打包能力，对它们进行处理。
下一节中我们将了解怎么将怎么将样式提取出来成为一个样式文件，并且以link的方式添加到index.html文件中，以及如何处理页面中的图片以及样式中的图片地址等图片资源。