webpack基本配置

作为一个前端，不会webpack不行啊，今天学习一下，感觉似懂非懂，记录一下吧

1.安装webpack

 1).创建一个文件夹，命令行进入该文件夹，创建package.json文件npm init

 2).安装webpack环境  npm install  webpack --save-dev

 

2.打包js文件

 1).创建一个新的js文件 index.js

  2).命令行 打包   webpack index.js(打包的js文件名) index.bundle.js(打包之后的js文件名)

 

3.打包css文件

 1).因为webpack不支持css样式 需要css-loader和style-loader来进行解析 安装 npm install css-loader style-loader --save-dev;

 2).引入方式

 

4.注意

1).我们每次修改完文件之后都需要运行一次打包命令 重新打包才能生效

2).为了避免每次修改完文件都需要重新运行打包命令，我们可采取下面方法来进行加载loader

webpack index.js index.bundle.js --module-bind 'css=style-loader!css-loader' 使用module绑定的方式来绑定loader

webpack index.js index.bundle.js --module-bind 'css=style-loader!css-loader' --watch 自动更新自动打包命令