webpack使用示例

一、初始化一个node项目

• npm init -y

• 创建src目录，并创建三个文件

  1. commonjs

exports.info = function (str) {
    console.log(str)
    document.write(str)
}

2. utils.js

exports.add = (a,b)=>  a + b

如果项目中有多个不同模块的文件，user.js，order.js…，则同时通过script标签引入到js中非常臃肿，而且会发生多次网络请求，可用webpack将多个js文件打包。

3. main.js

const util = require("./util")
const common = require("./common")

console.log(common.info('uuid'),util.add(10,90))

• 在项目下新建webpack.config.js来配置打包规则

//导入path模块
const path = require('path')

//定义JS打包规则
module.exports = {
    entry:'./src/main.js', //入口文件
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:'bundle.js'
    }

}

执行webpack命令进行打包

打包成功以后在项目根目录下生成了一个bundle.js

可以通过html文件引入这个js，然后执行。

其他命令：
1. webpack -w 监听文件变化，自动打包
2. webpack -h 查看帮助命令

打包css

• 安装依赖

npm install --save-dev style-loader css-loader

• 创建一个style.css文件

body{
    background: antiquewhite;
}

• 在main.js中引入
  
• webpack -v 重新打包

可以看到css已经生效，webpack将css文件也打包到了bundle.js文件中。