webpack是一款模块化打包工具，webpack是基于配置的，通过配置一些选项来让webpack执行打包任务
webpack在打包的时候，依靠依赖关系图，在打包的时候需要告知webpack两个概念：入口和出口
一般情况下，我们需要使用webpack.config.js进行配置
一个简单的webpack配置文件
//处理html文件const HtmlWebpackPlugin = require("html-webpack-plugin")//抽离css和sass代码的const ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin‘)const webpack = require(‘webpack‘)//处理路径const path = require(‘path‘)//开发配置const developmentConfig = { ???entry:{//入口 ???????main:‘./src/main.js‘, ???????// vendor:‘./src/vendor.js‘ ???}, ???// entry:‘./src/app.js‘, ???// entry:[‘./src/app.js‘,‘./src/vendor.js‘], ???output:{//输出 ???????path:path.join(__dirname,‘build‘), ???????filename:‘[name].js‘ ???}, ???devServer:{//开发服务器 ???????port:9000, ???????contentBase:‘./build‘, ???????historyApiFallback: true, ???????open: true, ???????proxy:{ ???????} ???}, ???module:{ ???????rules:[ ???????????{//编译jade ???????????????test:/\.jade$/, ???????????????use:[‘jade-loader‘,‘html-withimg-loader‘] ???????????}, ???????????{//处理css、js中引入的图片 ???????????????test:/\.(png|jpe?g|svg|gif)$/, ???????????????// use:‘url-loader?limit=1000&name=images/[hash:8].[name].[ext]‘ ???????????????use:[ ???????????????????{ ???????????????????????loader:‘url-loader‘, ???????????????????????options:{ ???????????????????????????limit:1000, ???????????????????????????name:‘/static/images/assets/[hash:8].[name].[ext]‘ ???????????????????????} ???????????????????} ???????????????] ???????????}, ???????????{//处理html引入的图片，在react中没啥用 ???????????????test:/\.html$/, ???????????????use:‘html-withimg-loader‘ ???????????},// ?????????{//将css代码放入header的style标签中// ?????????????test:/\.css$/,// ?????????????use:[‘style-loader‘,‘css-loader‘]// ?????????},// ?????????{//将scss代码编译成css，再将css代码放入header的style标签中// ?????????????test:/\.scss$/,// ?????????????use:[‘style-loader‘,‘css-loader‘,‘sass-loader‘]// ?????????}, ???????????{//抽离引入css代码放入到一个css文件中 ???????????????test:/\.css$/, ???????????????use:ExtractTextWebpackPlugin.extract({ ?????????????????fallback: "style-loader", ?????????????????use: "css-loader" ???????????????}) ???????????}, ???????????{//抽离引入scss代码编译后放入到一个css文件中 ???????????????test:/\.scss/, ???????????????use:ExtractTextWebpackPlugin.extract({ ?????????????????fallback: "style-loader", ?????????????????use: ["css-loader","sass-loader"] ???????????????}) ???????????},// ???????????{//只编译jsx// ???????????????test:/\.(js|jsx)$/,// ???????????????exclude:/node_modules/,// ???????????????use:‘jsx-loader‘// ???????????}, ???????????{//处理js代码，编译es6、jsx ???????????????test:/\.(js|jsx)$/, ???????????????exclude: /node_modules/,//除了哪个目录下的代码 ???????????????loader:‘babel-loader‘, ???????????????query: { ???????????????????presets: [‘es2015‘,‘react‘] ???????????????} ???????????} ???????] ???}, ???plugins:[ ???????new HtmlWebpackPlugin({ ???????????// title:‘webpack-config-demo‘, ???????????template:‘./src/index.html‘, ???????????filename:‘index.html‘ ???????}),// ?????new webpack.optimize.UglifyJsPlugin({// ?????????compress: {// ?????????????warnings: false,// ?????????????drop_console: false// ?????????} // ?????}), ???????new ExtractTextWebpackPlugin({ ???????????filename:‘app.css‘, ???????????allChunks:true ???????}) ???]}//生成配置const productionConfig = { ???entry:{ ???????app:‘./src/app.js‘, ???????vendor:‘./src/vendor.js‘ ???}, ???output:{ ???????path:path.join(__dirname,‘build‘), ???????filename:‘[name]_[hash].js‘ ???}, ???plugins:[ ???????new HtmlWebpackPlugin() ???]}module.exports = (env)=>{ ???if(env==‘production‘){ ???????return productionConfig ???} ???return developmentConfig}entry
entry配置项目打包的入口，值可以为单个的字符串执行某一个文件的地址，这个时候该文件就是入口文件，webpack会根据入口文件里各个模块间的关系形成依赖关系图，然后根据依赖关系图进行打包
entry:‘./src/app.js‘,output:{ ???path:path.join(__dirname,‘build‘), ???filename:‘app.js‘}但有的时候我们需要的是多入口，我们就写成数组的形式，数组里的每一个字符串地址指向的都是一个独立的入口，webpack会将这些入口的依赖打包
entry:[‘./src/app.js‘,‘./src/vendor.js‘],output:{ ???path:path.join(__dirname,‘build‘), ???filename:‘[name].js‘//不确定名字的时候，这里会打包成main.js}上面的两种entry配置都只会打包出一个js文件，但是在某一个应用中我们可能需要将js根据依赖关系打包成多个js文件，并且在多页面应用中，我们也确实不可能只使用一个js文件，那么我们就可以使用如下配置：
???entry:{ ???????app:‘./src/app.js‘, ???????vendor:‘./src/vendor.js‘ ???}, ???output:{ ???????path:path.join(__dirname,‘build‘), ???????filename:‘[name]_[hash].js‘ ???}这样，因为filename里写成名字是[name]，所以会根据entry的配置的键名来为打包出的js文件命名，hash是每次打包的一个随机的hash值，可以用来做版本控制
output
在这里配置打包输出的一些选项
filename可以确定打包出来的文件的名字，在里面我们可以使用[name],[hash]这样的占位符
path配置打包出去的文件的路径，需要绝对路径
env
在命令行或者终端中执行webpack –env hello命令，就相当于在打包的时候传入一个参数为hello
在webpack.config.js中可以暴露一个函数，这个函数就可以接收到env参数，当然函数就可以根据env参数来有选择的返回某一个或多个配置对象
module.exports = (env)=>{ ???if(env==‘production‘){ ???????return productionConfig ???} ???return developmentConfig}plugins
在webpack编译用的是loader，但是有一些loader无法完成的任务，交由插件（plugin）来完成，使用插件的时候需要在配置项中配置plugins选项，值是数组，可以放入多个插件，而一般的插件都是一个构造器，我们只需在plugins数组中放入该插件的实例即可，在实例化插件的时候又可以传入options，对插件的使用进行配置
html-webpack-plugin
这个插件可以选择是否依据模板来生成一个打包好的html文件，在里面可以配置title、template、filename、minify等选项
在这个插件里，我们可以使用jade、hbs、ejs等模板引擎来编译成HTML，举个栗子：
npm i jade jade-loader --save-dev module:{ ???rules:[ ???????{ ???????????test:/\.jade$/, ???????????use:‘jade-loader‘ ???????} ???]},plugins:[ ???new HtmlWebpackPlugin({ ???????// title:‘webpack-config-demo‘, ???????template:‘./src/index.jade‘, ???????filename:‘index.html‘ ???})]webpack-dev-server
webpack相辅相成的有一个server功能工具可以提供开发的热更新服务器
npm install webpack-dev-server –g
npm install webpack-dev-server –D
第一种启动方式：直接执行webpack-dev-server，如果有需要配置的选项，在后面跟上参数即可。例如
webpack-dev-server --hot true
第二种启动方式：在webpack.config.js中配置devServer的选项，执行webpack-dev-server就行
devServer:{ ???port:9000, ???contentBase:‘./build‘, ???historyApiFallback: true, ???open: true, ???proxy:{ ??????????}}loaders
在webpack中专门有一些东西用来编译文件、处理文件，这些东西就是loader，loader的使用就是在配置项中，设置modules，在modules中设置rule值为数组，在数组里放入多个匹配规则：
module:{ ???rules:[ ???????{test:/\.css$/,use:‘css-loader‘} ???], ???//before ???loaders:[ ???????{test:/\.css$/,loader:‘css-loader‘} ???],}test为此次匹配要匹配的文件正则规则，use代表要使用的loader
使用url-loader可以将css中引入的图片（背景图）、js中生成的img图片处理一下，生成到打包目录里
视图html-withimg-loader可以将html中img标签引入的img图片打包到打包目录
{ ???test:/\.(png|jpe?g|svg|gif)$/, ???// use:‘url-loader?limit=1000&name=images/[hash:8].[name].[ext]‘ ???use:[ ???????{ ???????????loader:‘url-loader‘, ???????????options:{ ???????????????limit:1000, ???????????????name:‘/static/images/assets/[hash:8].[name].[ext]‘ ???????????} ???????} ???]},{ ???test:/\.html$/, ???use:‘html-withimg-loader‘}处理css：
cnpm i css-loader style-loader –save-dev
配置：
{ ???test:/\.css$/, ???use:[‘style-loader‘,‘css-loader‘]}注意：webpack中loader的使用是从后往前的
css-loader可以将引入到js中的css代码抽离出来，style-loader可以将抽离出来的css代码放入到style标签中
处理sass
{test:/\.scss$/,use:[‘style-loader‘,‘css-loader‘,‘sass-loader‘]}将引入项目的css文件、scss文件抽成一个文件，引入到页面中
cnpm i extract-text-webpack-plugin
const ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin‘)///loader{ ???test:/\.css$/, ???use:ExtractTextWebpackPlugin.extract({ ?????fallback: "style-loader", ?????use: "css-loader" ???})},{ ???test:/\.scss/, ???use:ExtractTextWebpackPlugin.extract({ ?????fallback: "style-loader", ?????use: ["css-loader","sass-loader"] ???})}///pluginnew ExtractTextWebpackPlugin({ ???filename:‘app.css‘, ???allChunks:true})处理es6：
需要的依赖：
"babel": "^6.23.0",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
rules：
{ ???test:/\.js$/, ???exclude: /node_modules/, ???loader:‘babel-loader‘, ???query: { ???????presets: [‘es2015‘,‘react‘] ????}}webpack配置
原文地址：https://www.cnblogs.com/twoeggg/p/8269716.html