Webpack 笔记

Webpack的使用场景是单页应用，如果是多网页使用webpack会很痛苦，对于文件的切换等，你需要写多个html输出配置。违背了Webpack的初衷。all is component.

webpack is a module bundler.

目录结构：

.
├── build  #编译打包之后的输出
│   ├── bundle.js
│   └── index_.html
├── css #css
│   ├── indexv5_6.css
│   └── indexv8.css
├── index.html
├── node_modules
│   ├── css-loader
│   ├── html-webpack-plugin
│   ├── style-loader
│   ├── uglify-loader
│   ├── webpack
│   ├── webpack-load-plugins
│   └── zepto
├── package.json #npm script
├── src    ＃源文件
│   ├── test.js
│   └── zepto.min.js
└── webpack.config.js #配置文件

{
  "name": "uranus_ebiz",
  "version": "1.0.0",
  "description": "test webpack",
  "scripts": {
    "start": "webpack --config webpack.config.js --progress --colors"
  },
  "author": "ty4z2008",
  "license": "MIT",
  "dependencies": {
    "zepto": "^1.2.0"
  },
  "devDependencies": {
    "css-loader": "*",
    "html-webpack-plugin": "^2.22.0",
    "style-loader": "*",
    "uglify-loader": "^1.3.0",
    "webpack": "*",
    "webpack-load-plugins": "^0.1.2"
  }
}

编辑好package.json后执行npm install。

//webpack.config.js
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	entry:["./src/zepto.min.js","./src/test.js"],//入口文件配置
	output:{//输出配置
		filename:"bundle.js",
		path:__dirname+"/build/"
	},
	module:{
		loaders:[//加载器
			{test:/\.css$/,loader:"style!css"} //parse css
		]
	},
	plugins:[//插件项
		new webpack.optimize.UglifyJsPlugin({
			compress:{
				warnings:false,
			},
			output:{
				comments:false
			}
		}),
		new HtmlWebpackPlugin({
			filename:'index_.html', //输出的文件名
			inject:'body',//inject all scripts into the body
			hash:true //文件hash后缀
		})
	]
}

最后运行：npm start即可

参考资料： Webpack tutorials webpack tips

转载于:https://my.oschina.net/websec/blog/726575