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服務