入门webpack

1.代码分割,是页面加载当时需要加载的文件
2.loader机制处理,ES6,CSS,JS,图片,JSON
3.模块打包器,模块热更新
4.非常适合大型项目

一、安装

cd webpack
mkdir webpack-test
npm init  初始化目录
npm install webpack --save-dev  (安装node_modules依赖和webpack)

随便搞一个js文件,wyq.js

wepack wyq.js wyq.bundle.js    简单搞定

wyq.bundle.js里面多了很多webpack内置的函数并多模块进行标名

在创建一个hello.js
在创建一个style.css
以require('./hello.js/style.css')的形式进行注入
同时运行上一条终端命令

js可以成功插入,css提示报错

You may need an appropriate loader to handle this file type.
需要一个正确的加载方式加载这个文件类型
(在终端输入 npm install css-loader style-loader --save-dev);
(style-loader与css-loader不同之后进行讲解)
发现还是不行
这么解决就OK了
require('style-loader!css-loader!./style.css');

解释一下,css-loader是为了能读取.css文件,
style-loader是为了能把css文件中的代码插入到style标签里面,

每次写css都要写前缀嘛?

 webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'
1,在后面加入 --watch 就是自动监听打包
2,--progress 就是终端提示打包过程(百分比读条)
3,--display-modules 列出所有注入的文件和webpack使用什么loader方式读取
4,--display-reasons 为什么打包文件的原因

里面webpack终端命令写好的直接解决就好了

入门webpack

推荐阅读更多精彩内容