webpack入门

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

简单使用步骤总结：

1.npm install webpack -g(全局安装),并新建项目文件夹。

2.新建html文件做展示，在这个文件中引入打包好的js文件。

<script type="text/javascript" src="bundle.js" charset="utf-8"></script>

3.编辑js文件，自行设定入口文件，比如说我们把file1.js作为入口文件，可以在file1中引入其他文件。

 在file1中有document.write(require('./file2.js'));

 在file2中module.exports = { a:'abcd'};

4.打包file1为bundle.js

• 可以这样打包：webpack file1.js bundle.js
• 也可以写个配置文件webpack.config.js：

module.exports = {
    entry: "./file1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    }
};

这样配置的话只需要运行webpack就可以了。

注意： webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 file1.js 中的代码，其它模块会在运行 require 的时候再执行。

webpack只能处理js模块，所以需要引入loader来加载其他模块。

比如说项目中需要引入css文件，则需要css-loader 和 style-loader，直接npm install css-loader style-loader。

然后比如说要在file1中引入style.css文件，则可以require('!css-loader!style-loader./style.css').

这种比较麻烦，可以直接在配置文件中正则匹配对应文件类型用不同的loader

module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }

还有一些loader做不了的事情需要引入插件

plugins:[
    new webpack.BannerPlugin('这是一段注释哦')
    ]

如果想将代码分割并分块打包，那么可以同过require.ensure实现将里面require到的模块打包到一起，只有运行到require.ensure里面是才会运行这些模块

require.ensure([], function(require){
  var list = require('./a');
  a.show();
  var edit = require('./b');
  b.display();
}, 'a_b');

这样a.js和b.js就会被打包成一个文件，名字是第三个参数。

配置文件中做如下配置：

module.exports={
 entry:__dirname+'/index.js',
 output:{
   path: __dirname,
   filename:'[name]bundle.js',
   chunkFilename:'[name]chunk.js'
 }
}

对于output的filename中的[name]，指的是入口文件的name，而chunkFilename中的[name]指的是require.ensure的第三个参数。

webpack按需加载原理就是把代码切割，然后require.ensure在需要时再加载进来。