>[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'; ```