如今就我在項目中使用到的webpack插件進行分享。javascript
var webpack = require('webpack'); module.exports = { entry: __dirname + "/src/main.js", output: { path: __dirname + "/build/", filename: "build.js" }, module: { loaders: [ { test: /\.json$/, loader: "json" }, { test: /\.js$/, exclude: /node_modules/, loader: "babel" }, { test: /\.css$/, loader: 'style!css' }, { test: /\.vue/, loader: "vue" } ] }, vue: { loaders: { js: 'babel?{"presets":["es2015"]}', css: 'vue-style!css' } }, plugins: [ new webpack.optimize.UglifyJsPlugin() ], devServer: { historyApiFallback:true, hot:true, inline:true, progress:true, } }
entry爲你項目的入口文件,webpack會根據這個文件找到你因此依賴的模塊,最後打包到output那裏你指定位置和名稱的文件裏面。css
loaders是webpack的核心,它能夠使許多不一樣格式的文件轉化成js,在module我用4種loader,其中babel是把用es6寫的js編輯成es5的,vue是解析.vue文件的,下面vue裏面的loader是爲.vue文件另外配置的,下面plugins是webpack自帶的壓縮js的功能插件。最後devServer是一個很是實用插件,能夠大大提升開發效率,每當文件的修改是就會自動刷新瀏覽器看到最新效果,其原理是在內存生成一個暫時的「build.js」,這樣就不用在修改文件後webpack一下才看到效果。webpack的使用就分享到這,請期待我後面更多的分享。vue