webpack入门

摘要

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

webpack入门1.webpack用途
打包合并依赖文件
2.webpack优势
是基于内存,哪个文件变了,单独编译哪个文件
3.webpack安装
npm i webpack -g
4.webpack使用
webpack 入口文件 输出文件
5.webpack 监视文件变化 自动化
webpack 入口文件 输出文件 --watch
6.webpack配置文件
新建文件:webpack.config.js
里面是node代码

module.exports={
entry:'./entry.js',
output:{
path:__dirname,
filename:'bundle.js'
}
}

7.安装webpack-dev-server
npm install webpack-dev-server -g
8.使用webpack-dev-server
命令行webpack-dev-server
9.webpack dev server
提供热更新服务,当js文件
发生变化时自动重新编译,并且刷新页面
10.转换器
webpack默认只能载入原生的js文件
使用:下载转换器
npm install css-loader style-loader
引用:require('!style!css!./xxx.css')

李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: