webpack的初认识

最近在学习webpack，现在将webpack的一些学习认识分享一下

1、什么是webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。（引用webpack中文文档http://www.css88.com/doc/webpack2/）

2、webpack的安装与配置

• 首先是创建项目的结构，然后进行利用npm init 进行初始化配置文件
• 其次安装webpack，npm install webpack --save-dev
• 创建webpack.config.js，进行webpack配置

webpack.config.js的配置信息如下

const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
module.exports = {
	devtool:"#eval-source-map",
	entry:{
		main:"./src/main.js",
		login:"./src/login.js"
	},
	output:{
		path:path.resolve(__dirname,"dist"),
		filename:"[name].bundle.js",
		publicPath:""
	},
	module:{
		loaders:[
			{test: /\.html$/, loader: "raw-loader"},
			{test: /\.css$/,loader:"style-loader!css-loader"},
			{test: /\.(png|jpg)/,loader:"url-loader?limit=10000&name=src/img/[name].[ext]"},
			{test: /\.scss$/,loader:"style-loader!css-loader!sass-loader"},
			{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
            {test: /\.(woff|woff2)$/, loader:"url-loader?prefix=font/&limit=5000"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream"},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml"}
		]
	},
	plugins:[
		new webpack.ProvidePlugin({
			$:"jquery",
			jQuery:"jquery",
			"window.jQuery":"jquery"
		}),
		new webpack.BannerPlugin('author:yby'),
		new htmlWebpackPlugin({
			filename:"index.html",
			template:"index.html",
			inject:"body",
			chunks:["main"]
		}),
		new htmlWebpackPlugin({
			filename:"login.html",
			template:"login.html",
			inject:"body",
			chunks:["login"]
		})
	]
}

练习项目的位置http://git.oschina.net/baoyinYang/admin-webpack

 

转载于:https://my.oschina.net/u/3501743/blog/1068694