webpack入门(2)

我们首先上一个github上对webpack工作的简单示意图

webpack可以将我们各种后缀的文件，最后打包成浏览器需要的js，png，css等。然后我们来翻译一下webpack上面的介绍
webpack has two types of dependencies in its dependency tree: sync and async. Async dependencies act as split points and form a new chunk. After the chunk tree is optimized, a file is emitted for each chunk.
webpack在它的依赖树上有两种依赖，同步的和异步的。异步的依赖用来分割我们的代码并且组成一个新模块。在新模块树形成之后，一个文件会用来驱动这个模块(按需加载)
webpack can only process JavaScript natively, but loaders are used to transform other resources into JavaScript. By doing so, every resource forms a module.
webpack原本只能处理js，而loaders被用来把其他资源转化成js，通过这样，每个资源都可以形成一个模块(静态资源也可以)
webpack has a clever parser that can process nearly every 3rd party library. It even allows expressions in dependencies such as: require(“./templates/” + name + “.jade”). It handles the most common module styles: CommonJs and AMD.
webpack有一个聪明的转化器来处理每一个第三方依赖，它甚至允许这样的表达式 (“./templates/” + name + “.jade”)。它能处理所有以 CommonJs and AMD规范编写的模块

安装和使用

首先是

   npm init

接下来

   npm install webpack --save-dev

新建一个hello.js文件，在里面加上一些脚本，然后

   webpack hello.js hello.bundle.js

那么这时候我们会看到很多信息，首先是Hash值，接下来是webpack的版本，接下来是它打包的时间。Asset是打包生成的文件，Size是文件的大小，Chunks是分块，Chunk Names是分块名
我们再新建一个world.js，然后在hello.js中引用

   require('./world.js');

重新运行刚才的打包，我们打开打包后的文件，可以看到hello的编号是0，world的编号是1。然后会看到很多webpack的内置函数,其中有一行

   //我们的require被替换成webpack内置的require，引用的是模块的编号   _webpack_require__(1)

接下来我们试一下css，新建一个hello.css，然后写一些样式，同时我们从上面的介绍中知道，我们需要css-loader的支持，一起安装一下css-loader和style-loader

   require('css-loader!./hello.css')

再次打包后打开看以下新建的文件，多了其他一些内定义的函数，那么我们再新建一个hello.html，引入我们生成的js文件，然后使用style-loader让css生效

   require('style.loader!css-loader!./hello.css')

这时我们打开hello.html，就可以看到效果了。打开控制台，发现style-loader通过头部引入的css生成了样式，那么这样的引入显然十分麻烦，我们可以使用webpack的配置参数给css指定loader

   webpack hello.js hello.bundle.js --module-bind"css=style-loader!css-loader"

如果使用热更新，那么我们可以输入–watch参数
看到打包过程的–progresss
看到打包模块的–display-module等等

建立项目的webpack配置文件

首先建立一些我们需要的项目目录

   //代码源文件   mkdir src   //打包后的静态文件   mkdir dist

新建一个初始化页面index.html，引入打包后的文件
在src文件中放一个script和style文件夹，分别存放脚本和静态资源文件
最重要的部分就在于根目录下的webpack.config.js文件，我们可以打开官网查看config的配置方法，webpack会自动寻找根目录下的这个文件。

   module.exports = {       //要打包的文件       entry: './src/script/main.js',       //输出的文件       output: {           path: './dist/js',           filename: 'bundle.js'       }   }

然后直接运行webpack，直接进行了打包，如果我们配置文件名改成了webpack.dev.config.js，可以通过–config命令来使用配置文件

   webpack --config webpack.dev.config.js

如果我们想加入上面用过的参数，那么可以结合npm的脚本来实现
我们可以在npm的脚本中写入我们真实的webpack命令

   "script": {       "webpack": "webpack --config webpack.dev.config.js --progress --display-modules --colors"   }

只需要在npm中使用webpack run webpack就可以