webpack 一

检测node是否安装 node -v

检测npm是否安装 npm -v

安装webpack

npm install -g webpack

检测安装是否成功直接输入webpack，如果出现一堆如下的内容，说明安装成功了

下面新建一个项目，我在D盘下创建，输入如下代码

mkdir webpack     //创建一个webpack文件夹
cd webpack          //进入webpack文件夹
npm init              //会引导你创建一个package.json文件，包括名称、版本、作者这些信息等，会提示你输入一些基本信息，一路按回车就行

创建完成后，在D盘下多了一个webpack文件夹，在文件夹里面有一个文件package.json

接下来创建如下结构的目录

• /app
  • index.js
  • sub.js
• package.json
• webpack.config.js

添加了一个文件夹app和两个js文件，比较重要的是外面的webpack.config.js配置文件

js代码

sub.js

//我们这里使用CommonJS的风格
function generateText() {
  var element = document.createElement('h2');
  element.innerHTML = "Hello h2 world";
  return element;
}

module.exports = generateText;

index.js

var sub = require('./sub');
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);

写完后实现了简单的功能，创建了一个module，然后在另一个里面引用他

但我们的目标是合并成一个文件，并引用，为了省去这些麻烦

安装一个plugin，可以自动快速的帮我们生成HTML

npm install html-webpack-plugin --save-dev

创建完后，在目录下就会多出来一个文件夹node_modules

接下来写重要的部分，配置webpack.config.js

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
  entry: APP_PATH,
  //输出的文件名 合并以后的js会命名为bundle.js
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  //添加我们的插件 会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]
};

这样就配置好了，在根目录下输入webpack，系统显示一些信息，就成功了

成功后，会多出一个build的文件夹，里面有两个文件，一个是bundle.js，另一个是index.html，打开index.html，发现js文件已经插入进去了

bundle.js的内容很多看不懂，但他是先加载了index.js，后加载了subjs

 

二、配置webpack-dev-server

每次修改页面的时候，我们都要输入一遍webpack命令，然后重新刷新页面才能实现刷新，如果要实现自动更新，就要安装webpack-dev-server

输入

npm install webpack-dev-server --save-dev

完成后，在node_modules中会多出一条记录，上面的一个是我们之前装的plugin

安装完成后，在webpack.config.js中添加配置

module.exports = {
  ....
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },
  ...
}

然后再package.json里面配置一下运行的命令,npm支持自定义一些命令

...
"scripts": {
  "start": "webpack-dev-server --hot --inline"
},
...

配置完成后，在命令行输入 npm start，然后在浏览器中输入http://localhost:8080/ 刚才的页面也同样出来了

但神奇的是，只要修改文件，不用刷新页面，会自动更新

三、添加样式

现在来添加一些样式，webpack使用loader的方式来处理各种各样的资源，样式文件我们需要两种loader，css-loader 和 style－loader，css-loader会遍历css文件，找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。

安装loader

npm install css-loader style-loader --save-dev

添加完成后，同样是在node_modules中添加了两个文件夹

然后配置webpack.config.js

devServer: {
  ...

},

  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style', 'css'],
        include: APP_PATH
      }
    ]
  },
  ...

然后新建一个css文件main.css（在app文件夹下）

另外，在入口文件index.js中引用

require('./main.css');

大功告成，文字变成了红色，插入到了style标签中

如果要用sass同理，安装关于sass的loader

npm install sass-loader --save-dev

稍微修改一下config，删掉我们先前添加的css规则，加上下面的loader

      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
        include: APP_PATH
      },

四、处理图片和其他静态文件

webpack可以将图片自动转成base64编码

安装url-loader

npm install url-loader --save-dev

配置webpack.config.js

      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=40000'     //图片大小小于这个限制的时候，会自动启用base64编码图片
      }

 五、添加第三方插件

用npm来管理依赖，安装query和moment的支持

npm install jquery moment --save-dev

同样在node_modules里会多出文件夹

在js中引用

var sub = require('./sub');
var $ = require('jquery');
var moment = require('moment');
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World it</h1>';
document.body.appendChild(app);
app.appendChild(sub());
$('body').append('<p>look at me! now is ' + moment().format() + '</p>');

成功了，如果要支持ES6，要安装babel

npm install babel-loader babel-preset-es2015 --save-dev

配置webpack.config.js

...
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: APP_PATH,
        query: {
          presets: ['es2015']
        }
      },
...

现在可以改掉CommonJS风格的文件了

sub.js

export default function() {
  var element = document.createElement('h2');
  element.innerHTML = "Hello h2 world hahaha";
  return element;
}

index.js

import './main.scss';
import generateText from './sub';
import $ from 'jquery';
import moment from 'moment';

let app  = document.createElement('div');
const myPromise = Promise.resolve(42);
myPromise.then((number) => {
  $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
});
app.innerHTML = '<h1>Hello World it</h1>';
document.body.appendChild(app);
app.appendChild(generateText());

 

webpack是用一个配置文件来控制所有的打包，所有的魔力都是在这一个文件中发生的。 当然你不配置也可以，需要手动去敲更多的命令来执行，这个配置文件主要分为三大块

• entry 入口文件 让webpack用哪个文件作为项目的入口
• output 出口 让webpack把处理完成的文件放在哪里
• module 模块 要用什么不同的模块来处理各种类型的文件

所有安装都装在node_module中

 -------------------------------------------------------------------------------

项目2--打包管理

新建一个项目，同上面一样，输入 npm init ，生成package.json （这一步都一样）

然后创建一个html文件，和一个js文件

<!-- index.html -->
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1 id="app"></h1>
    <script src="bundle.js"></script>
    <!-- 本身没有这个文件，只有下面的entry.js文件，这个文件将通过webpack生成 -->
</body>
</html>

/*** entry.js ***/
document.getElementById('app').innerHTML="这是我第一个打包成功的程序";

然后运行webpack，生成bundle.js

webpack entry.js bundle.js    

再来创建一个js文件

/***first.js***/
var h2= document.createElement("h2")
h2.innerHTML="不是吧，那么快第二个打包程序啦！";
document.body.appendChild(h2);

然后修改entry.js

document.getElementById('app').innerHTML="这是我第一个打包成功的程序";
//添加
require("./first.js");

然后重新执行，发现first.js的内容也被打包进去了

----------------------------------------------------

这篇最后一点内容，常用命令

webpack #最基本的启动webpack命令
webpack -w #提供watch方法，实时进行打包更新
webpack -p #对打包后的文件进行压缩
webpack -d #提供SourceMaps，方便调试
webpack --colors #输出结果带彩色，比如：会用红色显示耗时较长的步骤
webpack --profile #输出性能数据，可以看到每一步的耗时
webpack --display-modules #默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

@