https://segmentfault.com/a/1190000006178770
这篇文章很好 看他的吧
const path = require(‘path‘);module.exports={ ???//入口文件的配置项 ???entry:{ ???????entry:‘./src/entry.js‘ ???}, ???//出口文件的配置项 ???output:{ ??????//打包的路径文职 ???????path:path.resolve(__dirname,‘dist‘), ???????//打包的文件名称 ???????filename:‘bundle.js‘ ???}, ???//模块：例如解读CSS,图片如何转换，压缩 ???module:{}, ???//插件，用于生产模版和各项功能 ???plugins:[], ???//配置webpack开发服务功能 ???devServer:{}}服务和热更新npm install webpack-dev-server --save-dev devServer:{ ???????//设置基本目录结构 ???????contentBase:path.resolve(__dirname,‘dist‘), ???????//服务器的IP地址，可以使用IP也可以使用localhost ???????host:‘localhost‘, ???????//服务端压缩是否开启 ???????compress:true, ???????//配置服务端口号 ???????port:1717 ???}模块：CSS文件打包style-loader ?css-loadermodule:{ ???????rules: [ ???????????{ ?????????????test: /\.css$/, ?????????????use: [ ‘style-loader‘, ‘css-loader‘ ] ???????????} ?????????] ???},插件配置：配置JS压缩uglifyjs-webpack-pluginconst uglify = require(‘uglifyjs-webpack-plugin‘);plugins:[ ???????new uglify() ???],打包HTML文件const htmlPlugin= require(‘html-webpack-plugin‘);new htmlPlugin({ ???????????minify:{ ???????????????removeAttributeQuotes:true ???????????}, ???????????hash:true, ???????????template:‘./src/index.html‘ ??????????????????})CSS中的图片处理file-loader、url-loaderCSS分离:extract-text-webpack-pluginconst extractTextPlugin = require("extract-text-webpack-plugin");Plugins： ???new extractTextPlugin("/css/index.css")处理HTML中的图片html-withimg-loaderloader: ???{ ???test: /\.(htm|html)$/i, ????use:[ ‘html-withimg-loader‘] }自动处理CSS3属性前缀postcss-loader1npm install --save-dev postcss-loader autoprefixer给webpack增加babel支持cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-reactloader: ???{ ???test:/\.(jsx|js)$/, ???use:{ ???????loader:‘babel-loader‘, ???????options:{ ???????????presets:[ ???????????????"es2015","react" ???????????] ???????} ???}, ???exclude:/node_modules/}.babelrc文件配置{ ???"presets":["react","es2015"]}哎 ?自己不会写博客 ?别人也可不了 ?给自己留个回忆吧
webpack 学习
原文地址：https://www.cnblogs.com/lfqcode/p/8615157.html