webpack前端工程化工具的使用

1. webpack概念

 

是一款 模块化加载器兼打包工具

 

2. commodJs 规范

 

require 模块依赖

exports 模块导出

module  模块定义

 

 

3. 指令

 

安装webpack命令行工具

npm i webpack -g

cnpm i webpack -g

webpack --help  查看webpack命令

 

npm init

 

npm i  根据package.json  下载所有插件

 

entry,js 入口文件

最开始新建一个index.html文件夹 ,再新建 一个entry.js文件,先是index.html的src引入entry.js  然后 执行 webpack entry.js bundle.js  把entry.js打包成bundle.js

webpack entry.js bundle.js

 

4.相关依赖

-S --save   项目依赖

-D --save-dev 开发依赖

 

 

5.loader  加载器   

执行命令 cnpm i css-loader  style-loader --save-dev

               npm i css-loader  style-loader --save-dev

 

在entry.js这样引入require("style-loader!css-loader!./style.css");==>把css变成一个模块

css-loader

 

设置配置文件  webpack.config.js

module.exports 模块导出

entry入口文件

output 出口文件 输出打包文件

path 输出打包文件路径

__dirname  根目录

filename 文件名

module 定义加载器

loaders 声明需要的加载器 css-loader babel-loader

test 正则匹配

 

配置完webpack.config.js文件后,在entry.js里面修改require("style-loader!css-loader!./style.css");

为 require("./style.css")

 

style-loader   把样式代码转为模块   

 

babel-loader

 

6.使用source-map

cnpm i source-map --save-dev  

 

webpack --devtool source-map

 

webpack.config.js里面配置      devtool:"source-map"

 

 

 

7. 配置es6环境(三部曲)

 

 

a. 下载loader 加载器

 

 cnpm i babel-loader babel-core babel-preset-es2015 --save-dev 项目依赖

 

 babel-loader babel-core   转移es5===>es6 让你书写es6

 

 babel-preset-es2015  预设 es6 环境

 

 

 

 

 b. 让所有js 文件都经过babel-loader转移加载 

 

 test:/\.js$/,loader:"babel-loader"}

 

 

 c 配置预设es6

 生成  .babelrc 文件

 

// require("./style.css");

import "./style.css";

import word from "./es6.js";

 

// var word =require("./es6");

 

导出jquery     import $ from "./jquery-1.10.2.min.js"

 

用 export default t; 导出

再用 import t from "./es6";接收  检验是否已经配好es6环境.

 

 

6webpack-dev-server 的模块热替换

cnpm i webpack-dev-server -g  X先配全局

cnpm i webpack-dev-server -D   再配本地的项目依赖

webpack-dev-server --inline--hot  起一个服务  执行成功后 在localhost:8080启动

 

在package.json里面配置:

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "watch":"webpack-dev-server --inline --hot"

  },

 

控制台输入npm run watch

 

8.npm基础知识储备

npm i forever -g   下载插件到全局环境

npm uni forever -g  卸载插件  uninstall

 

npm init  初始化项目 生成package.json

npm i underscore  下载插件  但是不在package.json 显示版本和相关信息

 

npm i underscore --save-dev  (-D)  devDependencies  开发依赖

npm i babel-cli -D   

npm i underscore --save      (-S)  dependencies     项目依赖

npm i tree -g  

npm i gulp -D

 

 

常见报错:

uncaught:未捕获

ReferenceError 引用错误

 

npm init

cnpm i webpack --save-dev

webpack entry.js bundle.js

cnpm install css-loader style-loader --save-dev

cnpm install css-loader style-loader --save-dev

webpack

cnpm i source-map --save-dev

webpack --devtool source-map

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

cnpm i webpack-dev-server -g

cnpm i webpack-dev-server -D

webpack-dev-server --inline--hot

npm run watch

 

Project is running at http://localhost:8080/  成功的标准启动在8080端口