>[danger] 所有的构建工具都是基于node.js平台运行的，模块化默认采用的是commonjs 新建目录文件 mkdir webpack-test ~~~ npm init npm install webpack webpack-cli -g npm install webpack webpack-cli --save-dev ~~~ 安装css-loader style-loader插件 ``` npm i css-loader style-loader -D ``` 下载less和less-loader插件 ``` npm i less less-loader -D ``` **webpack.config.js** 作用：当运行webpack指令时，会自动加载这里面的配置 ~~~ //resolve用来解决绝对路径的 const {resolve} = require('path'); module.exports = { mode:'development',//development和production //打包的入口文件 entry: './src/index.js', output: { //输出路径，__dirname是nodejs的变量代表当前文件的目录绝对路径 path: resolve(__dirname, 'dist'), //打包输出的文件名 filename: 'my-first-webpack.js' }, module: { //不同的文件配置不同的loader rules: [ { //匹配css文件 test: /\.css$/, //使用哪些loader处理 use数组里面的执行顺序，从右-->左，从下-->上以此执行 use: [ //创建style标签，将js中的样式插入进去，添加到head中生效 'style-loader', //将css文件变成commonjs模块加载到js中，里面内容样式是字符串 'css-loader' ] }, { //匹配less文件 test: /\.less$/, use: [ //创建style标签，将js中的样式插入进去，添加到head中生效 'style-loader', //将css文件变成commonjs模块加载到js中，里面内容样式是字符串 'css-loader', //将less编译成css 'less-loader' ] } ] }, plugins: [] }; ~~~ src/index.css ``` html,body{ height:100%; background-color: pink; } ``` src/index.less ``` #title{ color:red; } ``` src/index.js ``` import './index.css'; import './index.less'; ```