轉載：https://segmentfault.com/a/1190000006178770?utm_source=tag-newest
1、webpack組態檔
?
// 一個常見的`webpack`組態檔
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
?
module.exports = {
entry: __dirname + "/app/main.js", //已多次提及的唯一入口檔案
output: {
path: __dirname + "/build",
filename: "bundle-[hash].js"
},
devtool: 'none',
devServer: {
contentBase: "./public", //本地服務器所加載的頁面所在的目錄
historyApiFallback: true, //不跳轉
inline: true,
hot: true
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader",
options: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}, {
loader: "postcss-loader"
}],
})
}
}
]
},
plugins: [
new webpack.BannerPlugin('著作權所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html" //new 一個這個插件的實體，并傳入相關的引數
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
]
};
2、為什么要使用WebPack
現今的很多網頁其實可以看做是功能豐富的應用，它們擁有著復雜的JavaScript代碼和一大堆依賴包，為了簡化開發的復雜度，前端社區涌現出了很多好的實踐方法
-
模塊化，讓我們可以把復雜的程式細化為小的檔案;
-
類似于TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實作目前版本的JavaScript不能直接使用的特性，并且之后還能轉換為JavaScript檔案使瀏覽器可以識別；
-
Scss，less等CSS前處理器
-
...
這些改進確實大大的提高了我們的開發效率，但是利用它們開發的檔案往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就為WebPack類的工具的出現提供了需求，
什么是Webpack
WebPack可以看做是模塊打包機：它做的事情是，分析你的專案結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉換和打包為合適的格式供瀏覽器使用
正式使用Webpack
webpack可以在終端中使用，在基本的使用方法如下：
# {extry file}出填寫入口檔案的路徑，本文中就是上述main.js的路徑，
# {destination for bundled file}處填寫打包檔案的存放路徑
# 填寫路徑的時候不用添加{}
webpack {entry file} {destination for bundled file}
for instance:
# webpack非全域安裝的情況
node_modules/.bin/webpack app/main.js public/bundle.js
通過組態檔來使用Webpack
Webpack擁有很多其它的比較高級的功能（比如說本文后面會介紹的loaders和plugins），這些功能其實都可以通過命令列模式實作，但是正如前面提到的，這樣不太方便且容易出錯的，更好的辦法是定義一個組態檔，這個組態檔其實也是一個簡單的JavaScript模塊，我們可以把所有的與打包相關的資訊放在里面，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/168618.html
標籤：JavaScript
上一篇：jqgrid后臺處理搜索
下一篇：JS 的 new 是個啥？