webpack

安装webpack:

1. cnpm i webpack -g 全局安装 （卸载：npm uninstall webpack -g，查看webpack版本信息:cnpm info webpack）
   index.html
   a.js
   x.js
   xx.js
   xxx.js
   x.css
   xx.css
   -b.js

require('./x.js'); 可以引入其他文件
2. webpack init 初始化生成package.json文件,一路疯狂回车即可
3. 控制台输入webpack a.js b.js 打包成功生成b.js,打开index.html后就会显示之前所有引入文件渲染的效果

a.js中引入各种.js和.css文件
index.html页面中引入b.js（咱们很难懂）
b.js是最后通过控制台命令打包的结果，汇集了所有的x.js和x.css等等所有的文件
最后打开index.html页面得到最终渲染结果

loader转化器

webpack只认识js,loader可以将其他的文件转化成js，比如css,less,sass等

css-loader

style-loader

安装: cnpm i style-loader css-loader
css引入：require('style-loader!css-loader!./a.css')
命令:
webpack -p 用来压缩打包后的文件，压缩为一行。生产环境
webpack -w 自动更新（需要手动刷新）
webpack -d 在浏览器的控制台中的Sources中可以显示所有的js文件，也可以在webpack.config.js文件中配置 devtool: 'source-map' 然后控制台输入webpack即可
webpack -progress 调试模块
webpack -pw 既可以压缩，又能自动更新（手动刷新）
webpack-dev-server --port3306（自定义端口号）

可以在webpack.config.js文件中配置 devServer:{port:2333} 这样在控制台只输入webpack-dev-server就可以访问2333端口了

• 下载:cnpm i webpack-dev-server -g 用于热更新浏览器
• 版本对应问题
  webpack 3.x 要使用 webpack-dev-server 2.x
webpack 4.x 要使用 webpack-dev-server 3.x
• 本次实际应用:webpack-dev-server 2.11.2, webpack 3.6.0

控制台输入npm run test 会执行 package.json 文件里的scripts对象里的test属性。
那么就可以把这里的test改成我们自定义的要执行的属性名eg:dev,且把属性值改成webpack-dev-server。
此时只要在控制台输入npm run dev就可以访问目标端口了

总结一下有三种启动浏览器方式：

1. webpack-dev-server --port3306（自定义端口号）
2. webpack-dev-server
3. npm run dev

显示图片：

• 下载cnpm i url-loader
• 在webpack.config.js中配置相关信息

把图片存在指定目录下：

• 下载：cnpm i file-loader
• 在webpack.config.js中配置相关信息

引入.html文件

1. 想要在index.html文件中直接引入图片，且让该图片名在浏览器控制台以hash码的形式显示
   
2. 那就要在a.js中引入html.js(然后通过webpack一起打包…………)
   

• 下载:`cnpm i html-withimg-loader
• 在webpack.config.js中配置相关信息

webpack.config.js配置文件