webpack开发环境基本配置
1,创建配置文件
1.1 创建文件webpack.config.js
1.2 配置内容如下
const {resolve} = require('path'); //node内置核心模块,用来处理路径问题
module.exports ={
entry:''./src/js/index.js,//入口文件
output:{
filename:'./built.js', //输出文件路径配置
path:resolve(__dirname,'build/js') //输出文件路径配置
},
mode:'development' //开发环境
};
1.3 运行指令:webpack
2 打包样式资源
2.1,创建文件
2.2 下载安装loader包
npm i css-loader style-loader less-loader less -D
2.3 修改配置文件
/*
webpack.config.js webpack的配置文件
作用: 指示 webpack 干哪些活(当你运行 webpack 指令时,会加载里面的配置)
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
module.exports = {
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules: [
// 详细loader配置
// 不同文件必须配置不同loader处理
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上 依次执行
// 创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件
// 需要下载 less-loader和less
'less-loader'
]
}
]
},
// plugins的配置
plugins: [
// 详细plugins的配置
],
// 模式
mode: 'development', // 开发模式
// mode: 'production'
}
2.4 运行指令
webpack