这篇文章里，使用requirejs对项目进行了打包，现在替换为 webpack 进行打包：
可以看到项目文件夹下多了 package.json 和 webpack.config.js
文件，以及 node_modules 文件夹。
我在package.json 写入了webpack 打包所需要的依赖，以及定义了 scripts 字段，以便更方便的执行 webpack，但是使用webpack 之前，你还要 编辑 webpack.config.js 文件，众所周知，webpack 最重要的就是 如何写配置文件了：
const path = require('path'), //引入node 原生模块path，用来生成与当前系统相适应的绝对路径
ExtractTextPlugin = require('extract-text-webpack-plugin'), //抽取 CSS 的插件
WebpackNotifierPlugin = require('webpack-notifier'); //webpack 编译提示插件
let base = { //下面的 entry 入口字段，可以是字符串、对象、数组、函数等 ，这里使用 对象形式
index: './src/js/app/index.js'
}
module.exports = {
devtool: 'source-map', //配合 target 用来生成source-map 文件，以便 开发调试 debug 等， devtool 意指 开发工具
target: 'web',
entry: base,
output: { //指定输出目录，和文件名
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
resolve: { //resolve字段最常用的就是 alias （别名）属性，用来把一些冗长的路径替换为简单的字符，以便js中引入模块时更简洁
alias: {
gotop: path.resolve(__dirname, 'src/js/com/gotop.js'),
carousel: path.resolve(__dirname, 'src/js/com/carousel.js'),
waterfall: path.resolve(__dirname, 'src/js/com/waterfall.js')
}
},
plugins: [ //在最开始 require 插件后，这里还要在 plugins 字段中，创建插件实例
new WebpackNotifierPlugin({
title: 'Webpack 编译成功',
alwaysNotify: true
}),
new ExtractTextPlugin({
filename: "[name].css",
disable: false,
allChunks: true
})
],
module: { //webpack 2 对比 webpack 1 在 module 字段这里做了改进，更符合逻辑和语义化
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({ //以便在这里使用插件对象定义的的方法
fallback: 'style-loader',
use: {
loader: 'css-loader',
options: {
sourceMap: true
}
}
})
}
]
}
}
最终输出的 js 文件只有一个，但是会有上万行代码：
因为其中包括了 jQuery 源码，以及对 AMD 规范，也就是对requirejs 语法的处理，否则我的模块中使用的 define 等模块定义的语法，浏览器当然是不认识的。
注意这里 虽然模块中还是用的AMD规范，但我并没有引入 requirejs 源码，因为首先 webpack 原生支持了 CommonJs 、AMD 等模块风格，编译时会自动识别进行处理，最终输出的打包文件中，虽然引入没有requirejs源码，但是 webpack 做了类似的定义，最终在html 中引入打包好的 js 文件，浏览器成功运行。
网友评论