webpack2.4.1记录笔记
前言
本来跟着教程好好的，走着走着发现不对劲，npm执行程序一片通红。猛然醒悟，原来那是webpack1时代的教程。
所以这就促成了这份乱七八糟的手札。
原文：http://www.jianshu.com/p/42e11515c10f
安装环境
本文假设你已经安装了最新版npm和node.js并且熟悉npm管理包的基础操作了。
执行npm install 命令失败，请参考https://npm.taobao.org/，并使用cnpm替代操作。
安装位置
建立空文件夹，我目前使用D:\devserver。
然后有两种方式执行npm
* 进入文件夹在地址栏输入cmd打开命令行。
* C:\windows\system32\cmd.exe 右键管理员运行 依次输入以下命令
//cmd中执行
> d:
> cd devserver
安装webpack
//cmd中执行
//全局安装
npm install -g webpack
//或者只安装到项目目录
npm install --save-dev webpack
--save 和 --save-dev 的区别是：前者应该可用于生产、调试环境，而后者应该只用于调试环境。
准备步骤
回到 d:\devserver,使用npm init可以快速初始化项目。
//cmd中执行
npm init
依次填写相关信息，即可生成package.json文件。
1.package.json文件准备好后，需要进行安装webpack作为项目依赖包。
//cmd中执行
npm install --save-dev webpack
2.回到 d:\devserver 新建两个文件夹：app、public。app文件夹添加hello.js、main.js两个文件。public文件夹添加index.html文件。此时文件结构如下：
devserver
├─ node_modules
├─ app (用来存放原始数据和我们将写的JavaScript模块)
│ ├─ hello.js
│ └─ main.js
└─ public (准备给浏览器读取的数据)
└─ index.html
文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件
Document
hello.js只包括一个用来返回包含问候信息的html元素的函数。
// hello.js
module.exports = function() {
var msg = document.createElement('div');
msg.textContent = "Hello World!";
return msg;
};
main.js用来把hello模块返回的节点插入页面。
//main.js
var hello = require('./hello.js');
document.getElementById('root').appendChild(hello());
此时webpack已经可以正常执行了，一般来说，最基础的命令是
//cmd中执行
webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}
但是非全局的情况下就是
//cmd中执行
node_modules/.bin/webpack app/main.js public/bundle.js
配置webpack [手札1]
基础设置
虽然，做到这里 webpack 已经可以直接运行了，但是还有很多选项可以进行配置。
比如需要加入loaders和实时更新的测试服务器webpack-dev-server。
回到d:\devserve ， 新建文件 webpack.config.js 。
//webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",//__ 已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//__ 打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
};
//__ dirname 是node.js中的一个全局变量
做了这个配置，在命令行执行 webpack 就会按照这个配置执行了。
npm引导执行
重点来了，使用cmd难免会忘记执行哪些程序，所以可以利用package.json/scripts 进行引导任务执行。[手札2]
//package.json
{
...
"scripts":{
"start": "webpack"
}
...
}
以后只需要这样就可以执行该任务了：
此处因为使用了start所以可以简写 npm run star[手札2]
//命令行执行
npm start
配置调试地图(Source Maps)[手札3]
//webpack.config.js
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
...
}
使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项。
配置dev-server服务器(热更新)[手札4-待更新]
安装webpack-dev-server
//命令行执行
npm install --save-dev webpack-dev-server
配置
由于原文中使用旧版webpack，所以配置项都是有问题的，比如colors早就不存在了。
//webpack.config.js
module.exports = {
...
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
hot: true,//热模块更换
historyApiFallback: true,//不跳转
//colors:true,//2.4.1已经放弃了该配置，写了就报错
inline: true//实时刷新
}
...
}
运行devServer
这里就重点了，原文并没有告诉我们如何开启服务器。使用命令行如下：
//命令行执行
webpack-dev-server --hot --inline
如果使用npm引导加载则先配置package.json如下：
//package.json
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"dev": "webpack-dev-server --hot --inline"
},
...
}
//命令行执行
npm run dev
运行dev服务器后，因为其默认试用8080端口，所以无报错就可以访问http://localhost:8080
使用loaders
这是一个打包必备的东西，读取一种文件进行打包，需要对应的loaders。比如读取json文件需要json-loader ，读取vue需要 vue-loader。
安装json-loader
//安装JSON的loader
npm install --save-dev json-loader
由于原文中使用旧版webpack，所以loaders的配置项都是有问题的，可以查阅官方文档-loader-module-name-extension-removed
主要和原文的区别有：
* module.loaders 更改为 module.rules
所以webpack.config.js应该如此配置：[手札5]
//webpack.config.js
module.exports = {
...
module:{
rules:[
{ test:/\.json$/,loader:'json-loader' }
]
},
...
}
此时我们来试用一下吧。
在 d\devserver\app 创建config.json文件：
//config.json
{
"info":"I'm JSON!!"
}
修改 hello.js ：
//hello.js
var config = require('./config.json');
module.exports = function() {
var msg = document.createElement('div');
msg.textContent = config.info;
return msg;
};
现在页面应该更新为 I'm JSON!!了。
一般loaders的使用方法就是酱紫，但是有些比较复杂的需要另外处理，比如Babel。
Babel
它实际上是好几个模块化的包的集合，它的作用是把es6等未被浏览器大规模支持的js标准转换成es2015标准。babel-core是这些包的核心文件，可以按需加载需要的babel-loaders。用的最多应该是解析ES6的babel-preset-es2015包还有解析JSX的babel-preset-react包。
一次性安装数个依赖包：
//命令行执行
npm install -save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
修改webpack.config.js:[手札5]
//webpack.config.js
module.exports = {
...
module:{
rules:[
{
test:/\.json$/,
loader:'json-loader'
},
{
test:/\.js$/,
//只能匹配这个地址的js文件
include:[path.resolve(__dirname,"app")], //__ dirname全局变量
loader:'babel-loader', //-loader不可以省略（webpack1是可以的）
//不再用query，改成options了
options: {
presets: ['es2015','react']
}
}
]
}
...
}
babel的配置可能会很复杂，所以提取出来单独配置可能会更好，所以这里新建.babelrc，webpack会自动读取配置内容。
修改webpack.config.js
module.exports = {
...
module:{
rules:[
{
test:/\.json$/,
loader:'json-loader'
},
{
test:/\.js$/,
//只能匹配这个地址的js文件
include:[path.resolve(__dirname,"app")], //__ dirname全局变量
loader:'babel-loader', //-loader不可以省略（webpack1是可以的）
}
]
}
...
}
新建文件.babelrc
//.babelrc
{
"presets": ["react", "es2015"]
}
CSS
css-loader 可以使你使用类似于@import 和 url(...)的方法来实现require()的功能。
style-loader将所有文件样式计算后加入页面。
这二者结合能把样式表嵌入webpack打包后的js文件中(bundle.js)
//安装
npm install --save-dev style-loader css-loader
在d:\devserver\app新建css文件:
//main.css
html{color:red;}
在main.js引入css文件
//main.js
import './reset.css';
var hello = require('./hello.js');
document.getElementById('root').appendChild(hello());
接下来字应该变红色了。
手札
1.使用webpack.config.js来配置webpack
//webpack.config.js
//注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
2.package.json设置npm命令
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"start": "webpack" ,//配置的地方就是这里啦，相当于把npm的start命令指向webpack命令
"build": "webpack"//npm的start是一个特殊的脚本名称，它的特殊性表现在，在命令行中使用npm start就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"webpack": "^1.12.9"
}
}
3.通过配置devtool来生成source maps 方便调试
| devtool 选项 |
配置结果 |
| source-map |
在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度； |
| cheap-module-source-map |
在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便； |
| eval-source-map(开发阶段建议) |
使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项； |
| cheap-module-eval-source-map |
这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点； |
4.使用webpack构建本地服务器
安装webpack-dev-server
//命令行执行
npm install --save-dev webpack-dev-server
配置
由于原文中使用旧版webpack，所以配置项都是有问题的，比如colors早就不存在了。
其他配置暂时挂起懒得找。
//webpack.config.js
module.exports = {
...
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
hot: true,//热模块更换
historyApiFallback: true,//不跳转
//colors:true,//2.4.1已经放弃了该配置，写了就报错
inline: true//实时刷新
}
...
}
运行devServer
这里就重点了，原文并没有告诉我们如何开启服务器。使用命令行如下：
//命令行执行
webpack-dev-server --hot --inline
如果使用npm引导加载则先配置package.json如下：
//package.json
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"dev": "webpack-dev-server --hot --inline"
},
...
}
//命令行执行
npm run dev
5.loaders 配置
详细请点击参考文档。
一般情况下loaders配置只需要写test:名字正则匹配,loader:"加载器名称"
const path = require('path');
module.exports={
...
module: {
// 关于模块配置
rules: [
// 模块规则（配置加载器、解析器等选项）
{
test:/\.json$/,
loader:'json-loader',
include: [
path.resolve(__dirname, "app") //__ dirname全局变量
],
exclude: [
path.resolve(__dirname, "app/demo-files") //__ dirname全局变量
],
// 这里是匹配条件，每个选项都接收一个正则表达式或字符串
// test 和 include 具有相同的作用，都是必须匹配选项
// exclude 是必不匹配选项（优先于 test 和 include）
// 最佳实践：
// - 只在 test 和 文件名匹配 中使用正则表达式
// - 在 include 和 exclude 中使用绝对路径数组
// - 尽量避免 exclude，更倾向于使用 include
issuer: { test, include, exclude },
// issuer 条件（导入源）
enforce: "pre",
enforce: "post",
// 标识应用这些规则，即使规则覆盖（高级选项）
loader: "babel-loader",
//可以使用!来使用其中一个加载比如：'style-loader!css-loader'
// 应该应用的 loader，它相对上下文解析
// 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的
// 查看 webpack 1 升级指南。
options: {
presets: ["es2015"]
},
},
{
test: "\.html$",
use: [
// 应用多个 loader 和选项
"htmllint-loader",
{
loader: "html-loader",
options: {
...
}
}
]
}
]
}
...
}
