前言

在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。

*创建webpack-demo文件夹
$ mkdir webpack-demo
$ cd webpack-demo
*初始化一份package.json
$ npm init -y
*package.json内容
{"name": "webpack-demo",//项目文件夹名字"version": "1.0.0",//项目版本号"description": "",//项目的简介"main": "index.js","scripts": {//可以通过npm执行的命令 npm run test"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "",//作者"license": "ISC"
}

请关注package.json的内容在之后的学习中的变化。

目标

一般我们接触到的关于webpack的文章，都是以解读webpack官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过webpack打包js、css。

假设js编写采用的是es6语法,样式采用scss,图标采用iconfont和小图片，页面假设是html（实际可能是php或者jsp等）

项目目录如下

打包思路，在src目录下面创建dist文件夹，我们会根据不同页面功能打包成独立文件夹，其中包含对应的js和css

如下图

多页面应用js打包

webpack安装
$ npm install webpack --save-dev

# package.json中会出现下面属性"devDependencies": {"webpack": "^3.2.0"}

babel安装 (因为我们采用的是es6语法，所以需要通过babel来把代码转换成es5代码，从而在现有环境中执行。)
$ npm install babel-loader --save-dev
$ npm install babel-core babel-preset-es2015 --save-dev
创建.babelrc文件并添加代码 { "presets": ["es2015"] }

*在webpack.config.js中添加babel-loaders
module: {loaders: [{test: /\.js/,loader: 'babel',include: __dirname + '/src',}],
}

package.json

{"name": "webpack-demo","version": "1.0.0","description": "my first webpack demo","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.js

const path = require('path')
const webpack = require('webpack') //to access built-in plugins
const fs = require('fs')
function getEntry() {var jsPath = path.resolve(__dirname, 'src/js/app')var dirs = fs.readdirSync(jsPath)var matchs = [], files = {}dirs.forEach(function (item) {matchs = item.match(/(.+)\.js$/);if (matchs) {files[matchs[1]] = path.resolve(__dirname, 'src/js/app', item)}})return files
}
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代码

$ npm run dev- 执行后src/js/app下面的所有js会被分别打包到/src/js/dist下面，并且保持文件名不变，你会发现此时打包后的js不是压缩后的代码，如果需要压缩代码，需要在webpack.config.js中加入：
plugins: [//js文件的压缩new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})
]

下一章学习多页面scss打包