针对上篇文章有基本的了解之后,那么对于怎么配置,话不多说~~
-
开始安装基于webpack开发项目
-
npm init (初始化项目)
-
npm i webpack webpack-cli -g (全局安装webpack和webpack-cli)
-
npm i webpack webpack-cli -D
-
在安装的过程中需要输入项目名称,输入你的项目名称之后,一直回车到结束即可
-
文件目录
注意这里的文件目录是打包好的,而开始安装好,创建目录时是没有built.js文件,built.js文件是打包好之后才生成的 -
安装完成之后,在根目录创建打包文件build,之后再创建一个html,方便待会测试
html测试
-
并且在根目录下创建src文件,在src创建入口文件Index.js,index.css,index.less
-
将index.css index.less引入到入口文件
- index.css 和index.less样式
- 之后在根目录中创建webpack.config.js创建配置文件
把准备工作准备好之后,就可以开始配置了
webpack样式打包资源
const { resolve} = require('path')
module.exports = {
<!-- 入口起点 -->
entry: './src/index.js',
<!-- 输出文件 -->
output:{
<!-- 输出文件名称 -->
filename:'built.js'
<!-- 输出文件路径 -->
<!-- __dirname nodejs的变量,代表当前文件的目录绝对路径 -->
<!-- 通过resolve引入-->
path:resolve(__dirname,'build')
},
module:{
rules:[
{
test:/.\css$/,
<!-- 注意配置css时,应该先下载再通过use使用 -->
<!-- 下载 npm i style-loader css-loader -D -->
use:[
//use数组中loader执行顺序:从右到左,从下到上,依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader'
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
<!-- 如果使用less ,sass预编译 则不能继续修改上面已经配置好的代码需要重新配置-->
{
test:/.\less$/,
use:[
'style-loader',
'css-loader',
// 需要安装less和less-loader
<!-- npm i less-loader -D -->
// 将less编译成css文件
'less-loader'
]le
}
]
},
plugins:[
<!-- 配置plugins -->
],
<!-- mode 模式-->
mode: 'development' //开发模式
或者
<!-- mode: 'production' //生产模式 (需要注意的是,mode只能用其中一种模式。不能同时使用) -->
}
配置完之后,在终端打开输入webpack,进行打包。打包结束之后会发现build文件会生成刚刚配置好的built.js文件。而html文件也会自动生成引入built.js文件,如图
然后可以通过html文件上打开浏览器进行查看刚刚写好的css样式。
- 打包后的样式资源,可以再built.js文件下查看,一般再代码块的最后几行
- 如图