webpack 学习笔记

webpack ？

1、模块化

2、自定义文件或npm install

3、静态文件模块化

4、借助于插件和加载器

优势：

1、代码分离

2、装载器（CSS、sass、JSX .....）

3、智能解析（require（“./template”+name+".js"））

css-loader style-loader css的两种装载器

Bable ES6---ES5

webpack使用

安装 npm install -g webpack

        //之后创建一个文件夹，进入当前文件中，
         npm init   
      //创建package.json文件。
        webpack  app.js  bundle.js  //将app.js打包成bundle.js

        //在index.html中引入bundel.js即可，每次修改内容都需要执行一次
        webpack  app.js  bundle.js
       // 或者在第一次执行 webpack  app.js  bundle.js  --watch 实时监听，以后每次修改只需要刷新页面即可。

webpack 应用于第三方下载的库 例如jQuery

安装jQuery的依赖 npm install jquery --save

静态文件打包 CSS文件
需要装载器 安装css-loader style-loader

npm install css-loader style-loader --save-dev

在js文件中引用时
require('!style-loader!css-loader!./style.css')

多个CSS文件，优化使用webpack.config.js webpack运行的入口文件

image.png

webpack app.js bundle.js --watch 起来的，，当向停止的时候可以使用Ctrl+C

安装npm install -g webpack-dev-server --save-dev

配置package.json中的scripts

image.png

构建加启动 npm run build
npm start

启动之后在浏览器中访问http://localhost:8080/ 修改文件内容实时监听

Babel

下载插件和装载器

npm install babel-core babel-loader babel-preset-es2015 --save-dev

在webpac.config.js中配置

image.png

再一次构建运行。