溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了WebPack工具怎么使用，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
WebPack是什么
對于模塊的組織，通常有如下幾種方法：
基于以上的思考，WebPack項目有如下幾個目標：
從下圖可以比較清晰的看出WebPack的功能
這是一個示意圖
WebPack的特點
WebPack的優勢
WebPack的安裝
安裝命令
$ npm install webpack -g
使用webpack
$ npm init # 會自動生成一個package.json文件
$ npm install webpack --save-dev #將webpack增加到package.json文件中
可以使用不同的版本
$ npm install webpack@1.2.x --save-dev
如果想要安裝開發工具
$ npm install webpack-dev-server --save-dev
WebPack的配置
每個項目下都必須配置有一個 webpack.config.js ，它的作用如同常規的 gulpfile.js/Gruntfile.js ，就是一個配置項，告訴 webpack 它需要做什么。
下面是一個例子
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件項
plugins: [commonsPlugin],
//頁面入口文件配置
entry: {
index : './src/js/page/index.js'
},
//入口文件輸出配置
output: {
path: 'dist/js/page',
filename: '[name].js'
},
module: {
//加載器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解決方案配置
resolve: {
root: 'E:/github/flux-example/src', //絕對路徑
extensions: ['', '.js', '.json', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};plugins 是插件項，這里我們使用了一個 CommonsChunkPlugin的插件，它用于提取多個入口文件的公共腳本部分，然后生成一個 common.js 來方便多頁面之間進行復用。
entry 是頁面入口文件配置，output 是對應輸出項配置 （即入口文件最終要生成什么名字的文件、存放到哪里）
module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都需要使用什么加載器來處理。 所有加載器需要使用npm來加載
最后是 resolve 配置，配置查找模塊的路徑和擴展名和別名（方便書寫）
WebPack開始使用
這里有最基本的使用方法，給大家一個感性的認識
正確安裝了WebPack，方法可以參考上面
書寫entry.js文件
document.write("看看如何讓它工作！");
書寫index.html文件
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
執行命令，生成bundle.js文件
$ webpack ./entry.js bundle.js
在瀏覽器中打開index.html文件，可以正常顯示出預期
增加一個content.js文件
module.exports = "現在的內容是來自于content.js文件！";
修改entry.js文件
document.write(require("./content.js"));
執行第四步的命令
進行加載器試驗
增加style.css文件
body {
background: yellow;
}
修改entry.js文件
require("!style!css!./style.css");
document.write(require("./content.js"));
執行命令，安裝加載器
$ npm install css-loader style-loader # 安裝的時候不使用 -g
執行webpack命令，運行看效果
可以在命令行中使用loader
$ webpack ./entry.js bundle.js --module-bind "css=style!css"
使用配置文件
默認的配置文件為webpack.config.js
增加webpack.config.js文件
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};執行程序
$ webpack
發布服務器
安裝服務器
$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors
上述內容就是WebPack工具怎么使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
