webpack学习笔记(1)

阅读更多

webpack学习笔记(1)

 

该笔记学习参考:http://www.runoob.com/w3cnote/webpack-tutorial.html

 

项目结构:


webpack学习笔记(1)_第1张图片

 

//使用webpack命令打包js
//webpack w1.js buundle.js
//document.write("It works.");

//使用webpack命令打包有依赖的js
//webpack w1.js buundle.js
// document.write(require("./w2.js"));


//使用webpack loader对非js模块进行处理转化
//如:在应用中添加css文件,就需要用到css-loader和style-loader,css-loader会遍历css文件,然后找到url()表达式处理他们
//style-loader 会把原来的css代码插入页码的一个style标签中
//安装css-loader、style-loader ; npm css-loader style-loader
// require("!style-loader!css-loader!./style.css");
// document.write(require("./w2.js"));
//注:上面的require方式等价于 require("./style.css"); 并执行命令: webpack w1.js bundle.js --module-bind 'css=style-loader!css-loader'


//直接使用 webpack  命令不带任何参数根据webpack.config.js配置打包到输出!
// require("./style.css");
// document.write(require("./w2.js"));
// document.write('
111111'); //插件,主要用于一些loader不能完成的浮躁的操作,webpack 也自带一些插件 //webpack常见命令选项 //1.webpack --process --colors 使webpack输出内容待遇进度和颜色 //2.webpack --process --colors --watch 开启监听模式 //webpack-dev-server 使用express、nodejs的http服务

 
 

  • webpack学习笔记(1)_第2张图片
  • 大小: 24.9 KB
  • 查看图片附件

你可能感兴趣的:(webpack)