webpack初入
參考：http://www.jianshu.com/p/42e11515c10f#
序言：前面已經倒騰了grunt、gulp、fis3,今天來通過一個例子玩玩webpack!
通過下面的例子，能夠了解以下幾點：
1、如何安裝webpack
2、如何使用webpack
3、如何使用loader
4、如何使用webpack搭建本地web服務器
一、如何安裝(這裏使用的cnpm，個人感覺比npm快)
輸入以下命令進行全局安裝：
cnpm install webpack -g
此時webpack已經生效如下圖，(提示：同樣基於node，請自行安裝node.)
二、使用(主要是2個配置文件：package.json和webpack.config.js)
1、命令行進入demo03根目錄：(該demo目錄如下)
index.html文件如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="./js/bundle.js"></script> </body> </html>
style.css樣式文件如下：
body{ min-height: 100%; overflow: hidden; /*background-color: #fff;*/ background: rgba(37,38,33,.8); font-family: Arial; } h1 { font-family: arial; display: inline-block; margin: 0 auto; font-weight: 900; text-transform: uppercase; text-align: center; font-size: 9vw; line-height: 120%; padding: 300px 0; -webkit-animation: background 20s linear infinite; animation: background 20s linear infinite; background: -webkit-linear-gradient(0deg, rgba(150,48,30,1) 0%,rgba(199,201,88,1) 10%,
rgba(28,147,46,1) 20%,rgba(74,165,168,1) 30%,rgba(89,90,165,1) 40%,rgba(84,16,67,1) 50%,
rgba(28,58,63,1) 60%,rgba(82,175,183,1) 70%,rgba(78,170,76,1) 80%,rgba(150,48,30,1) 90%,rgba(199,201,88,1) 100%); background: linear-gradient(90deg, rgba(150,48,30,1) 0%,rgba(199,201,88,1) 10%,
rgba(28,147,46,1) 20%,rgba(74,165,168,1) 30%,rgba(89,90,165,1) 40%,rgba(84,16,67,1) 50%,
rgba(28,58,63,1) 60%,rgba(82,175,183,1) 70%,rgba(78,170,76,1) 80%,rgba(150,48,30,1) 90%,rgba(199,201,88,1) 100%); background-size: 1000% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } span { display: block; } span:nth-child(1) { font-size: 214%; line-height: 85%; text-indent: -0.33em; } span:nth-child(2) { font-size: 292%; line-height: 69%; word-spacing: -0.2em; text-indent: -0.07em; } @-webkit-keyframes background { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } } @keyframes background { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }
2、輸入命令：cnpm init，自動快速package.json文件，此時demo03根目錄下回自動生成一個package.json文件。
3、命令行輸入：cnpm install --save-dev webpack，安裝webpack依賴包;
4、命令繼續輸入：cnpm install --save-dev css-loader，安裝css-loader依賴;
5、命令輸入：cnpm install --save-dev style-loader，安裝style-loader依賴;
6、在js目錄下創建一個entry.js文件輸入如下代碼：
require(‘../css/style.css‘);//導入css
document.write("<h1><span>Life</span><span>is a</span><span>gradient</span></h1>");
7、在demo03根目錄下創建一個webpack.config.js文件並輸入如下配置：
var webpack = require(‘webpack‘); var path = require(‘path‘); module.exports = { entry: ‘./js/entry.js‘,//指定的入口文件 output: {//輸出 path: path.resolve(__dirname, ‘./js/‘), filename: ‘bundle.js‘//輸出文件名 }, module: { loaders: [ {test: /\.css$/, loader: ‘style-loader!css-loader‘} ] } }
8、此時配置已經完成，命令行輸入：webpack，如下：
編譯結束後會在js目錄下自動生成一個bundle.js文件，在html內運入該js文件並用瀏覽器打開如下：
9、搭建本地服務器：
繼續命令行輸入：cnpm install webpack-dev-server -g，全局安裝webpack本地服務器，
等待安裝完成後輸入下面命令啟動服務器：webpack-dev-server，默認地址：http://localhost:8080/或者http://localhost:8080/webpack-dev-server/
此時http://localhost:8080/下的頁面跟本地打開的是一樣的。
webpack初入