webpack基礎配置梳理梳理

首先來一個示例的目錄結構
--- Application |--- Home | |--- View (線上用戶訪問的.html目錄) --- Public (線上資源文件目錄) |--- js |--- images |--- css |--- ... --- source (前端開發目錄) |--- index (一個業務需求模塊,每一個業務需求模塊下會有不少頁面) | |--- index (index 頁面) | | |--- images | | |--- index.html | | |--- app.vue | | |--- index.js | | |--- style.scss | | |--- ... | |--- topics (topics 頁面) | | |--- images | | |--- topics.html | | | ... |--- crowd (另一個業務需求模塊,每一個業務需求模塊下會有不少頁面) | |--- index | | |--- index.html

一 webpack的基本項配置

module.exports = { entry: {}, //路口 output: { }, //輸出出口 module: { loaders: [ ] }, babel: { //配置babel "presets": ["es2015"], "plugins": ["transform-runtime"] }, plugins: [ ],//編譯的時候所執行的插件數組 vue: { },//vue的配置,須要單獨出來配置 devtool : "source-map" //調試模式 };

二 入口entry

//須要用到glob模塊 var glob = require('glob'); var getEntry = function () { var entry = {}; //首先咱們先讀取咱們的開發目錄 glob.sync('./source/**/*.js').forEach(function (name) { var n = name.slice(name.lastIndexOf('source/') + 7, name.length - 3); n = n.slice(0, n.lastIndexOf('/')); //接着我對路徑字符串進行了一些裁剪成想要的路徑 entry[n] = name; }); /** * entry = { * 'crowd/index' : './source/crowd/index/index.js', * 'index/index' : './source/index/index/index.js' * } * **/ //最後返回entry 給 webpack的entry return entry; };

三 輸出的文件output

output: { //輸出位置 path: path.resolve(__dirname, './public/'), //配置輸出路徑 filename: './js/[name].js' //文件輸出形式 //關於filename 咱們有個變量就是 [name] = entry的key 固然還有別的變量好比[id],[hash]等,你們能夠自行發揮 //咱們也能把filename寫成 filename : [name]/[name].[name].js 也是能夠的 },

四 加載css、style等樣式模塊的loader

{ test: /\.(png|jpg|gif)$/, loader: 'url?limit=10000&name=./images/[name].[ext]?[hash:10]', /*query: { limit: 10000, name: './images/[name].[ext]?[hash:8]' }*/ },

五 配置環境NODE_ENV

var vueLoader = { js: 'babel', css: ExtractTextPlugin.extract("vue-style-loader", "css-loader"), sass: ExtractTextPlugin.extract("vue-style-loader", "css-loader", 'sass-loader') }; if (process.env.NODE_ENV === 'production') { //判斷是否爲生產環境 module.exports.vue.loaders = vueLoader; module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.OccurenceOrderPlugin() ]); } else { //不是生產環境則配置devtool 調試 module.exports.devtool = 'source-map'; }