最近因開始學ReactJS,發現ReactJS跟webpack這個模塊化打包工具絕配，又開始找webpack的資料學。。。。。。在本尊千辛萬苦的看了眾多資料下，還是感覺阮大神寫的這個demo簡單明了，深入淺出，很適合新手學習，但是因為資料是全英文寫的，自己在學習的過程中就順當翻譯了下，以下為原文地址鏈接 ： https://github.com/ruanyf/webpack-demos#demo01-entry-file-source
怎樣使用
首先，全局安裝 webpack 和 webpack-dev-server
$ npm i -g webpack webpack-dev-server
其次，克隆該版本庫並安裝依賴
$ git clone git@github.com:ruanyf/webpack-demos.git $ cd webpack-demos $ npm install
現在，從版本庫demo文件夾里資源文件開始
$ cd demo01
$ webpack-dev-server
用你的瀏覽器打開http://127.0.0.1:8080
前言：Webpack是什么
Webpack是一個像Grunt和Gulp一樣的前端構建系統
它類似Browserify，可被用作模塊打包並且能夠做的更多
$ browserify main.js > bundle.js
# be equivalent to $ webpack main.js bundle.js
它的配置文件是Webpack.config.js
// webpack.config.js
module.exports = { entry: './main.js', output: { filename: 'bundle.js' } };
在有Webpack.config.js之后，你能不輸入任何參數調用Webpack
$ webpack
你應該知道一些命令行選項
- webpack ---------
進行一次開發模式編譯 - webpack -p ----- 進行一次生產模式編譯
- webpack --watch -------- 持續增量式監控編譯
- webpack -d ------- 生成source maps
- webpack --colors ------- 顯示靜態資源的顏色
- webpack --display-error-details ------- 顯示更多報錯信息
為了應用運行的准備，你能像下面那樣寫在你的package.json文件的scripts里
// package.json
{
// ... "scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors", "deploy": "NODE_ENV=production webpack -p" }, // ... }
索引
1.入口文件
2.多個入口文件
3.Babel加載器
4.CSS加載器
5.Image加載器
6.CSS模塊
7.UglifyJs插件
8.HTML Webpack Plugin and Open Browser Webpack Plugin
Demo01:入口文件
入口文件是一個Webpack將准備編譯為bundle.js的文件
例如：main.js是一個入口文件
// main.js
document.write('<h1>Hello World</h1>');
index.html
<html>
<body> <script type="text/javascript" src="bundle.js"></script> </body> </html>
Webpack按照配置文件編譯成bundle.js
// webpack.config.js
module.exports = { entry: './main.js', output: { filename: 'bundle.js' } };
運行服務器，瀏覽http://127.0.0.1:8080
$ webpack-dev-server
Demo02:多個入口文件
允許多入口文件，它對於多頁面app是有用的
// main1.js
document.write('<h1>Hello World</h1>'); // main2.js document.write('<h2>Hello Webpack</h2>');
index.html
<html>
<body> <script src="bundle1.js"></script> <script src="bundle2.js"></script> </body> </html>
webpack.config.js
module.exports = { entry: { bundle1: './main1.js', bundle2: './main2.js' }, output: { filename: '[name].js' } };
Demo03:Babal-loader
加載器是一個能編譯你app資源文件的預加載器。例如：Babel-loader能編譯JSX/ES6文件為JS文件。官方文檔有一個關於loaders的完整例子。
main.jsx
const React = require('react'); const ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.querySelector('#wrapper') );
index.html
<html>
<body> <div id="wrapper"></div> <script src="bundle.js"></script> </body> </html>
webpack.config.js
module.exports = { entry: './main.jsx', output: { filename: 'bundle.js' }, module: { loaders:[ { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }, ] } };
在webpack.config.js中，module.loaders領域被用於設定加載器。上面的片段用了babel-loader,它需求babel-preset-es2015和babel-preset-react插件來編譯ES6和React.你也能采用另外一種方式設定babel查詢選項
module: {
loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] }
Demo04:CSS-loader
Webpack允許你在JS文件中require CSS , 然后用CSS加載器預加載CSS
main.js
require('./app.css');
app.css
body {
background-color: blue; }
index.html
<html>
<head> <script type="text/javascript" src="bundle.js"></script> </head> <body> <h1>Hello World</h1> </body> </html>
webpack.config.js
module.exports = { entry: './main.js', output: { filename: 'bundle.js' }, module: { loaders:[ { test: /\.css$/, loader: 'style-loader!css-loader' }, ] } };
此外：你必須用兩個加載器來編譯CSS文件。第一個是CSS-loader用來閱讀CSS文件，另一個是Style-loader來插入Style標簽到HTML頁面中。不同的加載器靠感嘆號標記鏈接（！）
在運行服務器以后，index.html將有一個內聯樣式表
<head> <script type="text/javascript" src="bundle.js"></script> <style type="text/css"> body { background-color: blue; } </style> </head>