webpack使用分享

如今就我在項目中使用到的webpack插件進行分享。

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那裏你指定位置和名稱的文件裏面。

loaders是webpack的核心，它能夠使許多不一樣格式的文件轉化成js，在module我用4種loader,其中babel是把用es6寫的js編輯成es5的,vue是解析.vue文件的，下面vue裏面的loader是爲.vue文件另外配置的，下面plugins是webpack自帶的壓縮js的功能插件。最後devServer是一個很是實用插件，能夠大大提升開發效率，每當文件的修改是就會自動刷新瀏覽器看到最新效果，其原理是在內存生成一個暫時的「build.js」，這樣就不用在修改文件後webpack一下才看到效果。webpack的使用就分享到這，請期待我後面更多的分享。