webpack打包工具

创建
webpack.config.js

// constpath=require("path") //Node.js内置模块
// module.exports= {
//         entry: './src/main.js', //配置入口文件
//         output: {
//         path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
//         filename: 'bundle.js'//输出文件
//             }
// }
const path = require('path')
module.exports = {
  entry: path.join(__dirname, 'src/main.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [  
                {  
    test: /\.css$/,    //打包规则应用到以css结尾的文件上
    use: ['style-loader', 'css-loader']
                }  
            ]  
   }
    
}

打包命令

webpack --mode=development

也可以配置项目的npm运行命令，修改package.json文件
"scripts": {
//...,
"dev": "webpack --mode=development",
"prod": "webpack --mode=production"
 }

加载颜色

npm install -D style-loader css-loader 

main.js进行调用

const a= require("./01")
const b= require("./02")
require ('./style.css')
a.info('hello'+b.add(1,2))