前言上一篇介绍了学习webpack前的准备工作，下面开始学习webpack。*创建webpack-demo文件夹$mkdirwebpack-demo$cdwebpack-demo*初始化一个package.json$npminit-y*package.jsoncontent{"name":"webpack-demo",//项目文件夹名称"version":"1.0.0",//项目版本号"description":"",//项目介绍"main":"index.js","scripts":{//可以通过npm命令执行npmruntest"test":"echo\"Error:notestspecified\"&&exit1"},"keywords":[],"author":"",//Author"license":"ISC"}请付费在以后的学习中注意package.json内容的变化。目标一般我们接触到的关于webpack的文章主要是webpack官方文档的解读，针对的是单页项目的应用。我假设我想做一个多页面应用，如何通过webpack打包js和css。假设js是用es6语法写的，样式是scss，图标是iconfont和小图片，页面假设是html（实际可能是php或者jsp等）。工程目录打包如下。在src目录下创建一个dist文件夹，我们会根据不同的页面功能，打包成独立的文件夹，里面包含对应的js和css如下图。多页面应用js打包webpack安装$npminstallwebpack--save-dev#package.json中会出现如下属性"devDependencies":{"webpack":"^3.2.0"}babel安装（因为我们使用的是es6语法，我们需要使用babel将代码转成es5代码，以便在现有环境下执行。)$npminstallbabel-loader--save-dev$npminstallbabel-corebabel-preset-es2015--save-dev创建.babelrc文件并添加代码{"presets":["es2015"]}*在webpack中。config.js中添加babel-loadersmodule:{loaders:[{test:/\.js/,loader:'babel',include:__dirname+'/src',}],}package.json{"name":"webpack-demo","version":"1.0.0","description":"myfirstwebpackdemo","scripts":{"dev":"webpack"},"author":"sun","engines"":{"node":">=4.0.0","npm":">=3.0.0"},"devDependencies":{"babel-core":"^6.25.0","babel-loader":"^7.1.1","babel-preset-es2015":"^6.24.1","webpack":"^3.2.0"},"repository":{"type":"git","url":"https://github.com/xxxxxx（你的git名）/webpack-demo.git"}}webpack.config.jsconstpath=require('path')constwebpack=require('webpack')//访问内置插件constfs=require('fs')functiongetEntry(){varjsPath=path.resolve(__dirname,'src/js/app')vardirs=fs.readdirSync(jsPath)varmatches=[],files={}dirs.forEach(function(item){matches=item.match(/(.+)\.js$/);if(matches){files[matchs[1]]=path.resolve(__dirname,'src/js/app',item)}})returnfiles}module.exports={entry:getEntry(),output:{path:path.join(__dirname,"src/dist"),//文件输出目录publicPath:"src/dist",//用于配置文件发布路径，如CDN或本地服务器filename:"[name]/[name].js",//根据入口文件输出多个文件名},module:{loaders:[{test:/\.js/,loader:'babel-loader',include:__dirname+'/src/js'//include设置只转码src/js下的js文件，不想转码的第三方js库可以放在该目录外}]}}开始打包js代码$npmrundev-执行后，src/js/app下的所有js会分别打包到/src/js/dist下，文件名不变。你会发现此时打包好的js并没有压缩代码，如果需要压缩代码，需要在webpack.config.js中添加：plugins:[//压缩js文件newwebpack.optimize.UglifyJsPlugin({compress:{warnings:false}})]下一章学习多页面scss打包
