webpack使用示例
一、初始化一个node项目
- npm init -y
创建src目录，并创建三个文件
- commonjs
exports.info = function (str) {
console.log(str)document.write(str)
}
utils.js
exports.add = (a,b)=> a + b
如果项目中有多个不同模块的文件，user.js，order.js…，则同时通过script标签引入到js中非常臃肿，而且会发生多次网络请求，可用webpack将多个js文件打包。
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，然后执行。
其他命令：
- webpack -w 监听文件变化，自动打包
- 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文件中。
深藏阁楼爱情的钟
不念不忘少年蓝@
女爷i
朱雀
傷城~
怼烎@
亦凉
还没有评论，来说两句吧...