【原】webpack学习笔记

之前在react的项目中有用过webpack，不过没有认真的去研究，这段时间又重新好好的学习一下webpack，发觉 webpack是一个很强大的东西。而且很好用，方便，接下来主要是做一下学习的笔记

这次我还是在react中来使用它。我的react界面是单页面的应用

首先你的项目的根目录下要有一个package.json文件，来进行安装一下相应的依赖

package.json如下

"devDependencies": {

    "css-loader": "^0.23.1",

    "extract-text-webpack-plugin": "^1.0.1",

    "file-loader": "^0.8.5",

    "html-loader": "^0.4.3",

    "html-webpack-plugin": "^2.9.0",

    "jquery": "^1.12.0",

    "less": "^2.6.0",

    "less-loader": "^2.2.2",

    "style-loader": "^0.13.0",

    "url-loader": "^0.5.7",

    "webpack": "^1.12.13",

    "webpack-dev-server": "^1.14.1",

    "react-router":"^1.0.0",

     "react": "^0.14.0",

     "react-dom": "^0.14.0",

}

然后npm install就行依赖文件的安装

大概的目录结构是这样子

　 +router               #路由存放界面

　　　　　　+IndexComponent #组件

 　　　　　　　-index.js

　　　　　　-otherComponent #组件

　　　　　　　 -other.js

    +css                 #css存放目录

　　　　-index.css

　　　　-other.css

    +images              #图片资源

    +dist               #webpack编译打包输出目录，无需建立目录可由webpack根据配置自动生成

        -css

        -js

    +app.js              #路由的入口文件

　  +index.html

    + node_modules       #所使用的nodejs模块

    package.json         #项目配置

    webpack.config.js    #webpack配置

index.html 内容如下：

这里我们还是需要手动引入的。可以看到，我们只是引用了打包后的css和js,这个后面有说。先引入进去先

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

<title>webpack学习</title>

　　<link rel="stylesheet" type="text/css" href="dist/css/app.css">

</head>

<body">

　　<div" id="index"></div>

     <script src="dist/js/vendor.bundle.js"></script>

　　<script src="dist/js/app.bundle.js"></script>

</body>

</html>

在react中，我们引入css是直接在js中引入的，比如我们的 index.js,当然，你也可以直接在html引入一个总的css

 import React from 'react';

//引入css

 require("../css/index.css");

const Index= React.createClass({

  render(){

    return (

         <div> hello world</div>

      )

   }

});

export default Index;

other.js:

 import React from 'react';

//引入css

 require("../css/other.css");

const Other= React.createClass({

  render(){

    return (

         <div>this  is other component</div>

      )

   }

});

export default Other;

app.js 路由的入口文件。

其实内容随便写都行，因为主要是用来演示一下webpack的打包而已，并不是演示react-router

app.js

import { render } from 'react-dom'

import { Router, Route, IndexRoute, Link, IndexLink } from 'react-router'

import Index from '../router/IndexComponent/index.js'

import Other from '../router/OtherComponent/other.js'

render((

  <Router>

    <Route path="/" component={Index}>

      <IndexRoute component={Index} />

      <Route path="other" component={Other} />

    </Route>

  </Router>

), document.getElementById('index'))

webpack 配置及项目打包编译

这里是关键，在根目录下我们新建一个webpack.config.js，我们将进行一些配置，来完成我们的需求。刚开始可能不好理解，没关系测试多几次，你就会发觉它的神奇之处。

var path = require('path');

var webpack = require('webpack');

/*

extract-text-webpack-plugin插件，

将你的样式提取到单独的css文件里，如果没有它的话，webpack会将css打包到js当中

 */

var ExtractTextPlugin = require('extract-text-webpack-plugin');

/*

html-webpack-plugin插件，webpack中生成HTML的插件，

可以将打包好的文件动态加载到html中

 */

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry: { //配置入口文件，有几个写几个。我这里有两个文件。一个是所有我需要引入的文件，一个是我的入口文件，app.js

    //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出,比如下面数组里面的js,全部压缩在了vendor这个文件这里

　　　　vendor: ['react','react-dom','react-router'],

　　　 　app: [ './app.js'],

    },

    output: {

        path: path.join(__dirname, 'dist'),  //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它.名字可以随便起

        // publicPath: '/dist/',               很多教程的publicPath是这个，你会发觉不能动态加载到html中，会报错，实际上是下面的写法才对

        publicPath: '../',                //模板、样式、脚本、图片等资源对应的server上的路径

        filename: 'js/[name].bundle.js',       //每个页面对应的主js的生成配置。比如我的app.js打包后就为  js/app.bundle.js

        chunkFilename: 'js/[id].bundle.js'   //dundle生成的配置

    },

    module: {

        loaders: [ //加载器，关于各个加载器的参数配置。

　　　　　　　　{

　　　　　　　　test: /\.js$/,

　　　　　　　　loaders: ['react-hot', 'babel'],

　　　　　　　　include: [path.join(__dirname, ''), path.join(__dirname, 'router')]  //我需要打包的js所在的目录

　　　　　　　　},

　　　　　　　{

                test: /\.css$/,

                //配置css的抽取器、加载器。'-loader'可以省去

                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')

            }, {

                test: /\.less$/,

                //配置less的抽取器、加载器。中间!有必要解释一下，

                //根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入

                //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。

                loader: ExtractTextPlugin.extract('css!less')

            }, {

                //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源

                //比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样

                test: /\.html$/,

                loader: "html?attrs=img:src img:data-src"

            }, {

                //文件加载器，处理文件静态资源

                test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,

                loader: 'file-loader?name=./fonts/[name].[ext]'

            }, {

                //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求

                //如下配置，将小于8192byte的图片转成base64码

                // base的好处可以看看这篇文章

                // http://www.zhangxinxu.com/wordpress/2012/04/base64-url-image-%E5%9B%BE%E7%89%87-%E9%A1%B5%E9%9D%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/

                test: /\.(png|jpg|gif)$/,

                loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'

            }

        ]

    },

    plugins: [

        new webpack.ProvidePlugin({ //加载jq

            $: 'jquery',

　　　　　　_:'underscore' //加载underscore

        }),

        new webpack.optimize.CommonsChunkPlugin({

            name: 'vendors',   // 将公共模块提取，生成名为`vendors`bundle

            chunks: ['vendor'], //提取哪些模块共有的部分,名字为上面的vendor

            minChunks: Infinity // 提取至少*个模块共有的部分

        }),

        new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的 publickPath

        // 有几个页面就写几个

       new HtmlWebpackPlugin({                        //根据模板插入css/js等生成最终HTML

             favicon:'./images/favicon.ico', //favicon存放路径

             filename:'/view/index.html',    //生成的html存放路径，相对于 path

             template:'./index.html',    //html模板路径

             inject:true,    //允许插件修改哪些内容，包括head与body

             hash:true,    //为静态资源生成hash值

             chunks: ['vendor', 'app'], //需要引入的chunk，不配置就会引入所有页面的资源.名字来源于你的入口文件

             minify:{    //压缩HTML文件

                 removeComments:true,    //移除HTML中的注释

                 collapseWhitespace:false    //删除空白符与换行符

             }

         })

        new webpack.HotModuleReplacementPlugin() //热加载

    ],

    //使用webpack-dev-server，提高开发效率

    devServer: {

        contentBase: './',

        host: 'localhost',

        port: 3200, //比如我是监听3200端口

        inline: true, //可以监控js变化

        hot: true, //热启动

    }

};

　好了，此时你在cmd输入 webpack 就会看到在dist那里会生成两个目录，js和css这两个文件夹，js里面有vendor.bundle.js和app.bundle.js. css里面你会发觉只有一个app.css。

html-webpack-plugin 插件，动态为html加入js和css

　　在前面的html中，我们是手动引入css和html的。但是webpack的这个插件可以动态将我们的js和css自动加载到html 上，也就是说。可以将

index.html改为

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

<title>webpack学习</title>

<!-- 　这里无需引入样式 -->

</head>

<body">

　　<div" id="index"></div>

    <!-- 也不在需要引入ｊｓ -->

</body>

</html>

不过我觉得这个动态加载js和css的方法用不用都无所谓。

注意：

在网上的教程中，你会发觉有些动态加载js和css到html中会报错。提示找不到那个路径，这是为什么呢，因为是他们的 publicPath这里错了。

他们的是　　　　publicPath: '/dist/',

而实际上应该改为 publicPath: '../',

解决打包后图片出现的路径问题：

问题：

　　打包后，你有会发觉另一个问题，就是背景图中，小一点的图片会被转为base64，可以正常演示，但是我本地的图片，img的src中却找不到路径了。会报错。这个问题比较诡异，我网速找了好多资料都没找到怎么解决的。后来自己随便乱搞，总结出来3个解决方法：

方法1、你在引入图片的时候用这样来引入，那么就不会报错了

<img src={require("../images/cd_03.png")} />

不过我是用在react当中的，其他地方暂时没试过。虽然我的方法可以本地图片加载出来，不过始终觉得不是一个好方法

方法2：将webpack.config.js 配置中的

loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'

改为下面这样：

loader: 'url-loader?limit=1&name=[path][name].[ext]'

这样子修改之后，小于8k的图片不会转为base64，而且图片的名字也不会变成hash值。这样就可以找到路径了。那么如果很多比较小的图片怎么办呢，那就只能做好雪碧图了。

方法3 ：

将你的图片放到cnd上，引入图片的之后直接引入你线上的链接，这样的话图片就不会被打包，从而避免了图片的路径问题。不过要手动改动挺大的

这里顺便粘贴一下我的server.js.在根目录下

server.js

var webpack = require('webpack');

var WebpackDevServer = require('webpack-dev-server');

var config = require('./webpack.config');

process.env.NODE_ENV='production'

new WebpackDevServer(webpack(config), {

  publicPath: '/dist/',

  hot: true,

  historyApiFallback: true

}).listen(3200, 'localhost', function (err, result) {

  if (err) {

    console.log(err);

  }

  console.log('Listening at localhost:3200');

});

最后附上 webpack命令的几种基本命令

webpack命令行的几种基本命令（https://webpack.github.io/docs/cli.html）

$ webpack -h

$ webpack       //最基本的启动webpack方法，执行一次编译  for building once for development

$ webpack -w 或  --watch //增量编译，监听变动并进行自动实时打包更新 for continuous incremental build in development (fast!)

$ webpack -p // 压缩混淆脚本，对打包后的文件进行压缩，for building once for production (minification)

$ webpack -d // 生成 SourceMaps映射文件，告知哪些模块被最终打包到哪里，方便调试。 to include source maps

$ webpack --display-error-details 查看查找过程，方便出错时能查阅更详尽的信息

$ webpack --config XXX.js 使用另一份配置文件来打包

webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤

webpack --profile 输出性能数据，可以看到每一步的耗时

webpack --display-modules 默认情况下node_modules下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

这篇文章主要是记录一下学习webpack的笔记，具体的大家还是需要实际操作一下。webpack真的是一个神奇的东西，不单单是用在react的打包当中，用在前端的任何框架下打包都是可以的。可以说是gulp的2.0版本。值得一玩

用在react当中打包压缩的话，一个项目下来，所有的文件加起来也不过几百k,对性能肯定是有好处的。

有一篇很不错的，关于webpack的文章，可以看看 https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/