webpack替换html js,用 webpack 替换 requirejs 打包

这篇文章里，使用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 文件，浏览器成功运行。