1. 首先在根目录下载 less-loader
npm i less less-loader -D
2. 要操作的相关文件：
3. 首先用模块化的思想将需要使用的js模块暴露出来。（参考04_01.webpack打包初体验）
4. main.js内容
/*
* @Author: Robyn
* @Date: 2017-11-16 17:27:06
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-16 19:12:29
*/
let obj = require('./a.js'),
fn = require('./b.js');
require('./index.less');
fn(obj.a,obj.b);
5. webpack.config.js
/*
* @Author: Robyn
* @Date: 2017-11-16 20:06:29
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-16 20:06:29
*/
// 这个配置文件里面使用node的方式来编写
// 该配置文件必须向外暴漏一个配置对象, 供将来的webpack工具调用
const path = require('path');
// 导入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口
entry: path.resolve(__dirname, './src/main.js'),
// 输出
// webpack在打包文件的时候, 提供了一些变量, 有一个chunkhash变量
// 它是值是根据打包后的文件内容计算出来的, 为了解决用户缓存的问题,
// 我们一般会把这个变量的值拼接到我们的文件中
output: {
path: path.resolve(__dirname, 'dist'), // 输出路径,一般起名为dist目录
filename: 'bundle_[chunkhash:8].js' // 打包后的文件名, 一般起名为bundle.js
},
// 配置插件, 这里面存存放各种插件实例
plugins: [
// 配置一个html插件, 用于自动注入打包后的js
new htmlWebpackPlugin({
template: './src/index.html', // 要注入js的html
filename: 'index.html', // webpack不会修改源代码, 而是把修改后的文件输出到一个地方
inject: 'body',
minify:{ // 压缩优化HTML页面
collapseWhitespace:true, // 合并空白字符
removeComments:true, // 移除注释
removeAttributeQuotes:true // 移除属性上的引号
}
})
],
// webpack默认只能打包js, 要支持其他文件的打包, 需要在这里面加配置
module: {
// 配置规则
rules: [
// 打包less文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
};
6. 根目录下执行以下命令：
webpack
