webpack学习笔记整理

webpack打包：

1、 npm init 初始化

2、 npm install webpack --save-dev 安装webpack (安装完成后，会出现node_moudles 和package.json文件)

3、 打包文件 webpack [hello.js] hello.bundle.js

4、webpack 本身不支持打包css文件类型 需要使用loader

——在文件目录下安装loader npm install css-loader style-loader

——在js中引入css文件 require('css-loader!style-loader!./style.css);

css-loader: 使得webpack可以处理 .css文件

style-loader: 通过css-loader 处理完的一个文件，把处理完的文件 新建一个style标签插入到html文件中

5、在html文件内引入打包后的js文件 hello.bundle,js 就可以运行该文件了

6、webpack的参数：

--module-bind : 模块绑定：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'

--watch 文件自动更新 自动打包

--progess 可以看到打包过程

--display-modules 打包模块

--display-reasons 为什么打包这个模块的原因