webpack学习笔记(1)

webpack学习笔记(1)

 

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

 

项目结构:

 

//使用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('<br />111111');
//插件，主要用于一些loader不能完成的浮躁的操作,webpack 也自带一些插件

//webpack常见命令选项
//1.webpack --process --colors 使webpack输出内容待遇进度和颜色
//2.webpack --process --colors --watch 开启监听模式


//webpack-dev-server 使用express、nodejs的http服务