溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
研究一天多也沒弄出來個毛，今天早上來到隨便一試，嘿，結果成了。最簡潔最簡單的使用方法，記錄下來。
首先，安裝webpack命令：
$ npm install webpack -g
全局安裝，可以在cmd中使用webpack命令。
然后創建一個項目，項目名稱webpack,我這里用的是webstorm11.創建成功之后cmd進入項目根目錄，執行命令：
$ npm init
這個命令會創建一個package.json的文件，是整個項目的配置文件，添加上webpack的依賴包：
"devDependencies": {
"jsx-loader": "^0.12.2",
"css-loader": "^0.15.0",
"style-loader": "^0.12.4",
"react-hot-loader": "^1.1.1",
"webpack": "^1.5.1",
"webpack-dev-server": "1.6.4"
},這些包中的各種loader 是對不同文件格式進行打包的支持。
然后安裝這些包：
$ npm install
安裝完成之后我們先新建一些文件，
根目錄下建一個src文件夾，
src文件夾中建一個項目入口文件，我這里建的是index.js.
index.js:
const React = require('react');
const ReactDom = require('react-dom');
const View = require('./content');
ReactDom.render(<View/>,document.body);在跟index.js同目錄下，我建了一個content.js用來寫react組件。
content.js:
const React = require('react');
class View extends React.Component{
render(){
return <p>看看有沒有內容</p>
}
}
module.exports = View;然后在根目錄下新建一個webpack.config.js，這個文件是對webpack的配置。
內容如下：
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件項
plugins: [commonsPlugin],
//頁面入口文件配置
entry: {
index : './src/index.js'
},
//入口文件輸出配置
output: {
path: './lib/',
filename: '[name].js'
},
module: {
//加載器配置
loaders: [
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
]
},
//其它解決方案配置
resolve: {
root: 'D:/workproject/webpack/src', //絕對路徑
extensions: ['', '.js', '.json', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};各個節點的作用都寫了注釋，插件項我還沒弄明白是什么意思，頁面入口文件配置就是項目的入口文件，入口文件輸出配置是對打包之后的文件的保存位置，我這里配置到了根目錄/lib/文件夾下，如果當前沒有這個文件夾，打包的時候會自動新建。
加載器配置是對要打包的不同文件格式使用不同的加載器去打包，這一塊是很重要的，
寫完這個配置文件之后就可以執行命令打包了：
$ webpack
執行這個命令時會自動讀取webpack.config.js按照配置進行打包。
如果是執行這個命令后面不帶參數的話必須每修改一次文件就要重新手動執行一下這個命令，這樣很麻煩，我們可以在命令后加一個參數 -w
$ webpack -w
這樣在我們每次修改完文件內容并保存的時候會自動編譯，就不用每次再手動執行一次了。
打包完之后我們會發現在項目根目錄下多出了一個lib文件夾，文件夾里有個index.js，那是配置中的入口文件輸出配置中寫好的
//入口文件輸出配置
output: {
path: './lib/',
filename: '[name].js'
},path 是輸出路徑，filename 是輸出名字，[name] 是原名輸出，也可以指定名字，如果指定一個固定的名字，可以
filename: 'build.js'
這樣直接寫，如果有多個入口文件，可以
filename: '[name].build.js'
到時候輸出的文件名就是index.build.js.我這個項目里輸出的還是原來的名字：index.js
打包好之后，我們在根目錄下新建一個index.html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript" src="lib/common.js" charset="utf-8"></script> <script type="text/javascript" src="lib/index.js" charset="utf-8"></script> </body> </html>
把兩個文件都引入進去。common.js 我還沒弄明白是什么。 lib/index.js 就是我們用webpack打包過的文件，是自動生成的。
然后就可以直接雙擊index.html在瀏覽器中查看結果。
本文參考http://www.jianshu.com/p/b95bbcfc590d 更多內容稍后補充。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
