webpack 打包第一节

安装node.js 全局环境安装进去

cmd命令运行
cd react //进入react目录
mkdir webpack-demo //新建webpack-demo
cd webpack-demo //进入到webpack-demo目录
npm init 初始化
npm install webpack --save-dev//安装webpack包

进入到项目中新建hello.js文件

function hello(str){
  alert(str);
}

回到命令页

webpack hello.js hello.bundle.js//将hello文件打包为hello.bundle.js文件
*可能会出现webpack不是内部或者外部命令*
解决方法：
npm //查看npm是否正确安装
npm install webpack -g//安装全局的webpack

进入到项目新建style.css文件，在hello.js中引用

require ('./style.css');//在hello.js中引用CSS样式
webpack hello.js hello.bundle.js//再次打包文件
*出现错误提示need an appropriate loader to handle this file*
npm install css-loader style-loader --save-dev//安装所需的css和style-loader
*再次运行打包命令仍出现错误*
require ('css-loader!./style.css')//将上面引用样式修改 在引用之前先经过css-loader修改
**错误就木有了**

在项目中新建index.html文件，使用script标签将hello.bundle.js引入，再次打包hello.js文件，运行HTML文件，那么hello.js中的文件内容就会被执行啦
接下来在css文件中添加样式

body{background:red;}
再次执行webpack hello.js hello.bundle.js
运行index.html文件，无作用
require (style-loader!css-loader!./style.css)

css-loader使webpack能够使用到CSS样式，style-loader使css文件能够在HTML文件中插入style样式标签###

但是一般都不用require(style-loader!css-loader!./style.css)，而是使用require(./style.css)在命令行中指定，在命令行工具中输入webpack --help，查看参数设置。输入webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"。输入webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"在命令行指定。输入webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch 文件改变可以实现自动的更新，不需要每次绑定

*webpack的参数*
--watch 实现自动更新
--progress 查看绑定的进程
--display-modules 查看绑定的模块
--display -reasons查看打包模块的原因
---------------------------------------------------------------------------------------
--progress后命令行不能输入内容，可以ctrl+c即可

over