├── 17.实战技巧：抽离打包的js ├── 以安装jq为例.txt ├── .babelrc ├── 打包命令.txt ├── postcss.config.js ├── 新增知识点.txt ├── src │ ├── images │ │ └── women.png │ ├── js │ │ └── entry.js │ ├── css │ │ └── entry.css │ └── index.html ├── package.json └── webpack.config.js ├── 18.实战技巧：打包静态资源进项目目录 ├── 以安装jq为例.txt ├── src │ ├── public │ │ ├── 测试文件夹.txt │ │ └── test_img.png │ ├── images │ │ └── women.png │ ├── js │ │ └── entry.js │ ├── css │ │ └── entry.css │ └── index.html ├── .babelrc ├── postcss.config.js ├── 打包命令.txt ├── 新增知识点.txt ├── package.json └── webpack.config.js ├── 02.配置文件：入口和出口 ├── 打包命令.txt ├── src │ ├── entry2.js │ └── entry.js ├── package.json ├── dist │ └── index.html └── webpack.config.js ├── 15.实战技巧：优雅打包第三方类库 ├── 抽离jquery，vue.txt ├── .babelrc ├── postcss.config.js ├── 打包命令.txt ├── 新增知识点.txt ├── src │ ├── images │ │ └── women.png │ ├── js │ │ └── entry.js │ ├── css │ │ └── entry.css │ └── index.html ├── package.json └── webpack.config.js ├── 16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释 ├── 以安装jq为例.txt ├── .babelrc ├── postcss.config.js ├── 写注释.txt ├── 打包命令.txt ├── 新增知识点.txt ├── src │ ├── images │ │ └── women.png │ ├── js │ │ └── entry.js │ ├── css │ │ └── entry.css │ └── index.html ├── package.json └── webpack.config.js ├── 19.实战技巧：引入json并使用以及局部刷新插件（内置的） ├── src │ ├── public │ │ ├── 测试文件夹.txt │ │ └── test_img.png │ ├── images │ │ └── women.png │ ├── css │ │ └── entry.css │ ├── js │ │ └── entry.js │ └── index.html ├── .babelrc ├── config.json ├── postcss.config.js ├── 打包命令.txt ├── 新增知识点.txt ├── package.json └── webpack.config.js ├── 01.让你快速上手一个Demo ├── 打包命令.txt ├── src │ └── entry.js ├── package.json └── dist │ └── index.html ├── 12.给webpack增加babel支持 ├── .babelrc ├── postcss.config.js ├── 打包命令.txt ├── src │ ├── images │ │ └── women.png │ ├── js │ │ └── entry.js │ ├── css │ │ └── entry.css │ └── index.html ├── package.json └── webpack.config.js ├── 13.实战技巧：开发和生产并行设置 ├── .babelrc ├── postcss.config.js ├── 打包命令.txt ├── 新增知识点.txt ├── src │ ├── images │ │ └── women.png │ ├── js │ │ └── entry.js │ ├── css │ │ └── entry.css │ └── index.html ├── package.json └── webpack.config.js ├── 14.实战技巧：webpack模块化配置 ├── .babelrc ├── postcss.config.js ├── 打包命令.txt ├── 新增知识点.txt ├── es6_module │ └── es6_module.js ├── src │ ├── images │ │ └── women.png │ ├── js │ │ └── entry.js │ ├── css │ │ └── entry.css │ └── index.html ├── webpack_config │ └── webpack_entry.js ├── package.json └── webpack.config.js ├── 04.CSS文件打包 ├── src │ ├── css │ │ └── entry.css │ └── entry.js ├── 打包命令.txt ├── dist │ └── index.html ├── package.json └── webpack.config.js ├── README.md ├── 03.配置文件： 服务和热更新 ├── src │ └── entry.js ├── 打包命令.txt ├── package.json ├── dist │ └── index.html └── webpack.config.js ├── 05.插件配置：配置JS压缩 ├── src │ └── entry.js ├── 打包命令.txt ├── dist │ └── index.html ├── package.json └── webpack.config.js ├── 06.插件配置：HTML文件的发布 ├── src │ ├── js │ │ └── entry.js │ └── index.html ├── 打包命令.txt ├── package.json └── webpack.config.js ├── 09.CSS进阶：SASS文件的打包和分离 ├── src │ ├── sass │ │ └── entry.scss │ ├── images │ │ └── women.png │ ├── js │ │ └── entry.js │ ├── css │ │ └── entry.css │ └── index.html ├── 打包命令.txt ├── package.json └── webpack.config.js ├── 07.图片迈坑：CSS中的图片处理 ├── 打包命令.txt ├── src │ ├── js │ │ └── entry.js │ ├── images │ │ └── women.png │ ├── css │ │ └── entry.css │ └── index.html ├── package.json └── webpack.config.js ├── 11.CSS进阶：消除未使用的CSS ├── 打包命令.txt ├── postcss.config.js ├── src │ ├── js │ │ └── entry.js │ ├── images │ │ └── women.png │ ├── css │ │ └── entry.css │ └── index.html ├── package.json └── webpack.config.js ├── 08.图片迈坑：CSS分离与图片路径处理 ├── 打包命令.txt ├── src │ ├── js │ │ └── entry.js │ ├── images │ │ └── women.png │ ├── css │ │ └── entry.css │ └── index.html ├── package.json └── webpack.config.js └── 10.CSS进阶：自动处理CSS3属性前缀 ├── postcss.config.js ├── 打包命令.txt ├── src ├── js │ └── entry.js ├── images │ └── women.png ├── css │ └── entry.css └── index.html ├── package.json └── webpack.config.js /17.实战技巧：抽离打包的js/以安装jq为例.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/以安装jq为例.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02.配置文件：入口和出口/打包命令.txt: -------------------------------------------------------------------------------- 1 | webpack 2 | -------------------------------------------------------------------------------- /15.实战技巧：优雅打包第三方类库/抽离jquery，vue.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02.配置文件：入口和出口/src/entry2.js: -------------------------------------------------------------------------------- 1 | alert('成功'); -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/src/public/测试文件夹.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/以安装jq为例.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/src/public/测试文件夹.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01.让你快速上手一个Demo/打包命令.txt: -------------------------------------------------------------------------------- 1 | webpack src/entry.js dist/bundle.js -------------------------------------------------------------------------------- /17.实战技巧：抽离打包的js/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets":["react","env"] 3 | } -------------------------------------------------------------------------------- /12.给webpack增加babel支持/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets":["react","env"] 3 | } -------------------------------------------------------------------------------- /13.实战技巧：开发和生产并行设置/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets":["react","env"] 3 | } -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets":["react","env"] 3 | } -------------------------------------------------------------------------------- /15.实战技巧：优雅打包第三方类库/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets":["react","env"] 3 | } -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets":["react","env"] 3 | } -------------------------------------------------------------------------------- /04.CSS文件打包/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #00ff2a; 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webpack3.0-Example 2 | webpack3.0+版本 超详细 Example（代码内带有详细注释） -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets":["react","env"] 3 | } -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets":["react","env"] 3 | } -------------------------------------------------------------------------------- /03.配置文件： 服务和热更新/src/entry.js: -------------------------------------------------------------------------------- 1 | document.getElementById('title').innerHTML='devServer ???' -------------------------------------------------------------------------------- /05.插件配置：配置JS压缩/src/entry.js: -------------------------------------------------------------------------------- 1 | document.getElementById('title').innerHTML='devServer ??' -------------------------------------------------------------------------------- /06.插件配置：HTML文件的发布/src/js/entry.js: -------------------------------------------------------------------------------- 1 | document.getElementById('title').innerHTML='devServer' -------------------------------------------------------------------------------- /09.CSS进阶：SASS文件的打包和分离/src/sass/entry.scss: -------------------------------------------------------------------------------- 1 | $col:#ff00bf; 2 | body{ 3 | color:$col; 4 | } -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"xz", 3 | "age":24 4 | } -------------------------------------------------------------------------------- /01.让你快速上手一个Demo/src/entry.js: -------------------------------------------------------------------------------- 1 | document.getElementById('title').innerHTML='一个简单demo，让你初始webpack' -------------------------------------------------------------------------------- /04.CSS文件打包/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/04.CSS文件打包/打包命令.txt -------------------------------------------------------------------------------- /02.配置文件：入口和出口/src/entry.js: -------------------------------------------------------------------------------- 1 | document.getElementById('title').innerHTML='通过webpack.config.js配置出口入口打包(多入口打包)' -------------------------------------------------------------------------------- /03.配置文件： 服务和热更新/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/03.配置文件： 服务和热更新/打包命令.txt -------------------------------------------------------------------------------- /05.插件配置：配置JS压缩/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/05.插件配置：配置JS压缩/打包命令.txt -------------------------------------------------------------------------------- /17.实战技巧：抽离打包的js/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/17.实战技巧：抽离打包的js/打包命令.txt -------------------------------------------------------------------------------- /06.插件配置：HTML文件的发布/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/06.插件配置：HTML文件的发布/打包命令.txt -------------------------------------------------------------------------------- /07.图片迈坑：CSS中的图片处理/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/07.图片迈坑：CSS中的图片处理/打包命令.txt -------------------------------------------------------------------------------- /11.CSS进阶：消除未使用的CSS/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/11.CSS进阶：消除未使用的CSS/打包命令.txt -------------------------------------------------------------------------------- /13.实战技巧：开发和生产并行设置/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /13.实战技巧：开发和生产并行设置/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/13.实战技巧：开发和生产并行设置/打包命令.txt -------------------------------------------------------------------------------- /13.实战技巧：开发和生产并行设置/新增知识点.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/13.实战技巧：开发和生产并行设置/新增知识点.txt -------------------------------------------------------------------------------- /15.实战技巧：优雅打包第三方类库/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /15.实战技巧：优雅打包第三方类库/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/15.实战技巧：优雅打包第三方类库/打包命令.txt -------------------------------------------------------------------------------- /15.实战技巧：优雅打包第三方类库/新增知识点.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/15.实战技巧：优雅打包第三方类库/新增知识点.txt -------------------------------------------------------------------------------- /17.实战技巧：抽离打包的js/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /17.实战技巧：抽离打包的js/新增知识点.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/17.实战技巧：抽离打包的js/新增知识点.txt -------------------------------------------------------------------------------- /04.CSS文件打包/src/entry.js: -------------------------------------------------------------------------------- 1 | import css from './css/entry.css' 2 | document.getElementById('title').innerHTML='devServer ???' -------------------------------------------------------------------------------- /08.图片迈坑：CSS分离与图片路径处理/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/08.图片迈坑：CSS分离与图片路径处理/打包命令.txt -------------------------------------------------------------------------------- /10.CSS进阶：自动处理CSS3属性前缀/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /11.CSS进阶：消除未使用的CSS/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /12.给webpack增加babel支持/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /12.给webpack增加babel支持/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/12.给webpack增加babel支持/打包命令.txt -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/14.实战技巧：webpack模块化配置/打包命令.txt -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/18.实战技巧：打包静态资源进项目目录/打包命令.txt -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/新增知识点.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/18.实战技巧：打包静态资源进项目目录/新增知识点.txt -------------------------------------------------------------------------------- /07.图片迈坑：CSS中的图片处理/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css' 2 | document.getElementById('title').innerHTML='devServer' -------------------------------------------------------------------------------- /09.CSS进阶：SASS文件的打包和分离/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/09.CSS进阶：SASS文件的打包和分离/打包命令.txt -------------------------------------------------------------------------------- /10.CSS进阶：自动处理CSS3属性前缀/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/10.CSS进阶：自动处理CSS3属性前缀/打包命令.txt -------------------------------------------------------------------------------- /11.CSS进阶：消除未使用的CSS/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css' 2 | document.getElementById('title').innerHTML='devServer3' -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/新增知识点.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/14.实战技巧：webpack模块化配置/新增知识点.txt -------------------------------------------------------------------------------- /08.图片迈坑：CSS分离与图片路径处理/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css' 2 | document.getElementById('title').innerHTML='devServer' -------------------------------------------------------------------------------- /10.CSS进阶：自动处理CSS3属性前缀/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css' 2 | document.getElementById('title').innerHTML='devServer' -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /17.实战技巧：抽离打包的js/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/17.实战技巧：抽离打包的js/src/images/women.png -------------------------------------------------------------------------------- /07.图片迈坑：CSS中的图片处理/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/07.图片迈坑：CSS中的图片处理/src/images/women.png -------------------------------------------------------------------------------- /11.CSS进阶：消除未使用的CSS/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/11.CSS进阶：消除未使用的CSS/src/images/women.png -------------------------------------------------------------------------------- /13.实战技巧：开发和生产并行设置/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/13.实战技巧：开发和生产并行设置/src/images/women.png -------------------------------------------------------------------------------- /15.实战技巧：优雅打包第三方类库/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/15.实战技巧：优雅打包第三方类库/src/images/women.png -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/19.实战技巧：引入json并使用以及局部刷新插件（内置的）/打包命令.txt -------------------------------------------------------------------------------- /08.图片迈坑：CSS分离与图片路径处理/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/08.图片迈坑：CSS分离与图片路径处理/src/images/women.png -------------------------------------------------------------------------------- /09.CSS进阶：SASS文件的打包和分离/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/09.CSS进阶：SASS文件的打包和分离/src/images/women.png -------------------------------------------------------------------------------- /10.CSS进阶：自动处理CSS3属性前缀/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/10.CSS进阶：自动处理CSS3属性前缀/src/images/women.png -------------------------------------------------------------------------------- /12.给webpack增加babel支持/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/12.给webpack增加babel支持/src/images/women.png -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/es6_module/es6_module.js: -------------------------------------------------------------------------------- 1 | function es6module(){ 2 | alert('es6模块化引入') 3 | } 4 | //暴露 模块化 5 | module.exports=es6module; 6 | -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/14.实战技巧：webpack模块化配置/src/images/women.png -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/写注释.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/写注释.txt -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/18.实战技巧：打包静态资源进项目目录/src/images/women.png -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/新增知识点.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/19.实战技巧：引入json并使用以及局部刷新插件（内置的）/新增知识点.txt -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/打包命令.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/打包命令.txt -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/新增知识点.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/新增知识点.txt -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/src/public/test_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/18.实战技巧：打包静态资源进项目目录/src/public/test_img.png -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/19.实战技巧：引入json并使用以及局部刷新插件（内置的）/src/images/women.png -------------------------------------------------------------------------------- /09.CSS进阶：SASS文件的打包和分离/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css' 2 | import sass from '../sass/entry.scss' 3 | document.getElementById('title').innerHTML='devServer' -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/src/public/test_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/19.实战技巧：引入json并使用以及局部刷新插件（内置的）/src/public/test_img.png -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/src/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanPhoto/webpack3.0-Example/HEAD/16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/src/images/women.png -------------------------------------------------------------------------------- /07.图片迈坑：CSS中的图片处理/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:pink; 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | } -------------------------------------------------------------------------------- /08.图片迈坑：CSS分离与图片路径处理/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:pink; 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | } -------------------------------------------------------------------------------- /13.实战技巧：开发和生产并行设置/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css' 2 | document.getElementById('title').innerHTML='devServer' 3 | let a='9.18'; 4 | console.log(Number.parseInt(a)); 5 | 6 | 7 | -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/webpack_config/webpack_entry.js: -------------------------------------------------------------------------------- 1 | //声明entry变量 2 | const entry ={}; 3 | //声明路径属性 4 | entry.path={ 5 | entry:'./src/js/entry.js' 6 | } 7 | //进行模块化 8 | module.exports =entry; -------------------------------------------------------------------------------- /12.给webpack增加babel支持/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css' 2 | document.getElementById('title').innerHTML='devServer' 3 | let a='9.18'; 4 | console.log(Number.parseInt(a)); 5 | 6 | 7 | -------------------------------------------------------------------------------- /09.CSS进阶：SASS文件的打包和分离/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:hsl(345, 100%, 88%); 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | } -------------------------------------------------------------------------------- /10.CSS进阶：自动处理CSS3属性前缀/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:pink; 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | transform: rotate(45deg); 8 | box-shadow: 1px 2px 3px #f40; 9 | } -------------------------------------------------------------------------------- /15.实战技巧：优雅打包第三方类库/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css'; 2 | // import $ from 'jquery';//普通的局部引用 3 | document.getElementById('title').innerHTML='devServer' 4 | let a='9.18'; 5 | console.log(Number.parseInt(a)); 6 | 7 | $('#title').html('利用webpack自带插件，引入第三方库jquery') 8 | -------------------------------------------------------------------------------- /17.实战技巧：抽离打包的js/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css'; 2 | // import $ from 'jquery';//普通的局部引用 不建议 这么用 3 | document.getElementById('title').innerHTML='devServer' 4 | let a='9.18'; 5 | console.log(Number.parseInt(a)); 6 | 7 | $('#title').html('利用webpack自带插件，引入第三方库jquery') 8 | -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css'; 2 | // import $ from 'jquery';//普通的局部引用 不建议 这么用 3 | document.getElementById('title').innerHTML='devServer' 4 | let a='9.18'; 5 | console.log(Number.parseInt(a)); 6 | 7 | $('#title').html('利用webpack自带插件，引入第三方库jquery') 8 | -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css'; 2 | // import $ from 'jquery';//普通的局部引用 3 | document.getElementById('title').innerHTML='devServer' 4 | let a='9.18'; 5 | console.log(Number.parseInt(a)); 6 | 7 | $('#title').html('利用webpack自带插件，引入第三方库jquery') 8 | -------------------------------------------------------------------------------- /11.CSS进阶：消除未使用的CSS/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:pink; 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | transform: rotate(45deg); 8 | box-shadow: 1px 2px 3px #f40; 9 | } 10 | #demoaaa{ 11 | font-size: 20px; 12 | } -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css'; 2 | // es6模块化引入 写法 nodejs 还是用 require()这种方式引入 3 | import es6module from '../../es6_module/es6_module.js'; 4 | document.getElementById('title').innerHTML='devServer' 5 | let a='9.18'; 6 | console.log(Number.parseInt(a)); 7 | // 调用 8 | es6module() 9 | -------------------------------------------------------------------------------- /13.实战技巧：开发和生产并行设置/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:hsl(345, 100%, 88%); 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | transform: rotate(45deg); 8 | box-shadow: 1px 2px 3px #f40; 9 | } 10 | #aaaaa{ 11 | font-size:24px; 12 | } -------------------------------------------------------------------------------- /15.实战技巧：优雅打包第三方类库/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:hsl(345, 100%, 88%); 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | transform: rotate(45deg); 8 | box-shadow: 1px 2px 3px #f40; 9 | } 10 | #aaaaa{ 11 | font-size:24px; 12 | } -------------------------------------------------------------------------------- /17.实战技巧：抽离打包的js/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:hsl(345, 100%, 88%); 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | transform: rotate(45deg); 8 | box-shadow: 1px 2px 3px #f40; 9 | } 10 | #aaaaa{ 11 | font-size:24px; 12 | } -------------------------------------------------------------------------------- /12.给webpack增加babel支持/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:hsl(345, 100%, 88%); 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | transform: rotate(45deg); 8 | box-shadow: 1px 2px 3px #f40; 9 | } 10 | #aaaaa{ 11 | font-size:24px; 12 | } -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:hsl(345, 100%, 88%); 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | transform: rotate(45deg); 8 | box-shadow: 1px 2px 3px #f40; 9 | } 10 | #aaaaa{ 11 | font-size:24px; 12 | } -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:hsl(345, 100%, 88%); 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | transform: rotate(45deg); 8 | box-shadow: 1px 2px 3px #f40; 9 | } 10 | #aaaaa{ 11 | font-size:24px; 12 | } -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:hsl(345, 100%, 88%); 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | transform: rotate(45deg); 8 | box-shadow: 1px 2px 3px #f40; 9 | } 10 | #aaaaa{ 11 | font-size:24px; 12 | } -------------------------------------------------------------------------------- /02.配置文件：入口和出口/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^3.8.1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/src/css/entry.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:hsl(345, 100%, 88%); 3 | } 4 | .img{ 5 | background:url('../images/women.png')no-repeat center center; 6 | width: 372px;height: 423px; 7 | transform: rotate(45deg); 8 | box-shadow: 1px 2px 3px #f40; 9 | } 10 | #aaaaa{ 11 | font-size:24px; 12 | } -------------------------------------------------------------------------------- /01.让你快速上手一个Demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^3.8.1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /03.配置文件： 服务和热更新/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^3.8.1", 13 | "webpack-dev-server": "^2.9.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /01.让你快速上手一个Demo/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /04.CSS文件打包/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /03.配置文件： 服务和热更新/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /05.插件配置：配置JS压缩/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /06.插件配置：HTML文件的发布/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /04.CSS文件打包/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.28.7", 13 | "style-loader": "^0.19.0", 14 | "webpack": "^3.8.1", 15 | "webpack-dev-server": "^2.9.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /05.插件配置：配置JS压缩/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.28.7", 13 | "style-loader": "^0.19.0", 14 | "webpack": "^3.8.1", 15 | "webpack-dev-server": "^2.9.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /07.图片迈坑：CSS中的图片处理/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /13.实战技巧：开发和生产并行设置/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /15.实战技巧：优雅打包第三方类库/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /17.实战技巧：抽离打包的js/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /02.配置文件：入口和出口/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /08.图片迈坑：CSS分离与图片路径处理/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /09.CSS进阶：SASS文件的打包和分离/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /10.CSS进阶：自动处理CSS3属性前缀/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /11.CSS进阶：消除未使用的CSS/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /12.给webpack增加babel支持/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/src/js/entry.js: -------------------------------------------------------------------------------- 1 | import css from '../css/entry.css'; 2 | // import $ from 'jquery';//普通的局部引用 不建议 这么用 3 | document.getElementById('title').innerHTML='devServer' 4 | let a='9.18'; 5 | console.log(Number.parseInt(a)); 6 | 7 | $('#title').html('利用webpack自带插件，引入第三方库jquery') 8 | // 引入json webpack3.0已经应用了这个所以 就不用引入json的loader 9 | var json =require('../../config.json'); 10 | document.getElementById("json").innerHTML= json.name+json.age; -------------------------------------------------------------------------------- /06.插件配置：HTML文件的发布/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.28.7", 13 | "html-webpack-plugin": "^2.30.1", 14 | "style-loader": "^0.19.0", 15 | "webpack": "^3.8.1", 16 | "webpack-dev-server": "^2.9.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /07.图片迈坑：CSS中的图片处理/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.28.7", 13 | "file-loader": "^1.1.5", 14 | "html-webpack-plugin": "^2.30.1", 15 | "style-loader": "^0.19.0", 16 | "url-loader": "^0.6.2", 17 | "webpack": "^3.8.1", 18 | "webpack-dev-server": "^2.9.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /08.图片迈坑：CSS分离与图片路径处理/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.28.7", 13 | "extract-text-webpack-plugin": "^3.0.1", 14 | "file-loader": "^1.1.5", 15 | "html-webpack-plugin": "^2.30.1", 16 | "style-loader": "^0.19.0", 17 | "url-loader": "^0.6.2", 18 | "webpack": "^3.8.1", 19 | "webpack-dev-server": "^2.9.3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /09.CSS进阶：SASS文件的打包和分离/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.28.7", 13 | "extract-text-webpack-plugin": "^3.0.1", 14 | "file-loader": "^1.1.5", 15 | "html-webpack-plugin": "^2.30.1", 16 | "node-sass": "^4.5.3", 17 | "sass-loader": "^6.0.6", 18 | "style-loader": "^0.19.0", 19 | "url-loader": "^0.6.2", 20 | "webpack": "^3.8.1", 21 | "webpack-dev-server": "^2.9.3" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /10.CSS进阶：自动处理CSS3属性前缀/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "autoprefixer": "^7.1.6", 13 | "css-loader": "^0.28.7", 14 | "extract-text-webpack-plugin": "^3.0.1", 15 | "file-loader": "^1.1.5", 16 | "html-webpack-plugin": "^2.30.1", 17 | "postcss-loader": "^2.0.8", 18 | "style-loader": "^0.19.0", 19 | "url-loader": "^0.6.2", 20 | "webpack": "^3.8.1", 21 | "webpack-dev-server": "^2.9.3" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /02.配置文件：入口和出口/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 引入webpack 4 | const webpack = require('webpack'); 5 | module.exports = { 6 | //入口文件的配置项 7 | entry:{ 8 | entry:'./src/entry.js', 9 | //这里我们又引入了一个入口文件 10 | entry2:'./src/entry2.js' 11 | }, 12 | //出口文件的配置项 13 | output:{ 14 | //输出的路径，用了Node语法 15 | path:path.resolve(__dirname,'dist'), 16 | //输出的文件名称 17 | filename:'[name].js' 18 | }, 19 | //模块：例如解读CSS,图片如何转换，压缩 20 | module:{ 21 | 22 | }, 23 | //插件，用于生产模版和各项功能 24 | plugins:[ 25 | 26 | ], 27 | //配置webpack开发服务功能 28 | devServer:{ 29 | 30 | } 31 | } -------------------------------------------------------------------------------- /11.CSS进阶：消除未使用的CSS/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "autoprefixer": "^7.1.6", 13 | "css-loader": "^0.28.7", 14 | "extract-text-webpack-plugin": "^3.0.1", 15 | "file-loader": "^1.1.5", 16 | "html-webpack-plugin": "^2.30.1", 17 | "postcss-loader": "^2.0.8", 18 | "purify-css": "^1.2.5", 19 | "purifycss-webpack": "^0.7.0", 20 | "style-loader": "^0.19.0", 21 | "url-loader": "^0.6.2", 22 | "webpack": "^3.8.1", 23 | "webpack-dev-server": "^2.9.3" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /03.配置文件： 服务和热更新/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 引入webpack 4 | const webpack = require('webpack'); 5 | module.exports = { 6 | //入口文件的配置项 7 | entry:{ 8 | entry:'./src/entry.js' 9 | }, 10 | //出口文件的配置项 11 | output:{ 12 | //输出的路径，用了Node语法 13 | path:path.resolve(__dirname,'dist'), 14 | //输出的文件名称 15 | filename:'bundle.js' 16 | }, 17 | //模块：例如解读CSS,图片如何转换，压缩 18 | module:{ 19 | 20 | }, 21 | //插件，用于生产模版和各项功能 22 | plugins:[ 23 | 24 | ], 25 | //配置webpack开发服务功能 26 | devServer:{ 27 | //设置基本目录结构 28 | contentBase:path.resolve(__dirname,'dist'), 29 | //服务器的IP地址，可以使用IP也可以使用localhost 30 | host:'localhost', 31 | //服务端压缩是否开启 32 | compress:true, 33 | //配置服务端口号 34 | port:1717 35 | } 36 | } -------------------------------------------------------------------------------- /12.给webpack增加babel支持/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "autoprefixer": "^7.1.6", 13 | "babel-core": "^6.26.0", 14 | "babel-loader": "^7.1.2", 15 | "babel-preset-env": "^1.6.1", 16 | "babel-preset-es2015": "^6.24.1", 17 | "babel-preset-react": "^6.24.1", 18 | "css-loader": "^0.28.7", 19 | "extract-text-webpack-plugin": "^3.0.1", 20 | "file-loader": "^1.1.5", 21 | "html-webpack-plugin": "^2.30.1", 22 | "postcss-loader": "^2.0.8", 23 | "purify-css": "^1.2.5", 24 | "purifycss-webpack": "^0.7.0", 25 | "style-loader": "^0.19.0", 26 | "url-loader": "^0.6.2", 27 | "webpack": "^3.8.1", 28 | "webpack-dev-server": "^2.9.3" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /13.实战技巧：开发和生产并行设置/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "server": "webpack-dev-server --open", 9 | "dev":"set type=dev&webpack", 10 | "build": "set type=build&webpack" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "autoprefixer": "^7.1.6", 16 | "babel-core": "^6.26.0", 17 | "babel-loader": "^7.1.2", 18 | "babel-preset-env": "^1.6.1", 19 | "babel-preset-es2015": "^6.24.1", 20 | "babel-preset-react": "^6.24.1", 21 | "css-loader": "^0.28.7", 22 | "extract-text-webpack-plugin": "^3.0.1", 23 | "file-loader": "^1.1.5", 24 | "html-webpack-plugin": "^2.30.1", 25 | "postcss-loader": "^2.0.8", 26 | "purify-css": "^1.2.5", 27 | "purifycss-webpack": "^0.7.0", 28 | "style-loader": "^0.19.0", 29 | "url-loader": "^0.6.2", 30 | "webpack": "^3.8.1", 31 | "webpack-dev-server": "^2.9.3" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "server": "webpack-dev-server --open", 9 | "dev":"set type=dev&webpack", 10 | "build": "set type=build&webpack" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "autoprefixer": "^7.1.6", 16 | "babel-core": "^6.26.0", 17 | "babel-loader": "^7.1.2", 18 | "babel-preset-env": "^1.6.1", 19 | "babel-preset-es2015": "^6.24.1", 20 | "babel-preset-react": "^6.24.1", 21 | "css-loader": "^0.28.7", 22 | "extract-text-webpack-plugin": "^3.0.1", 23 | "file-loader": "^1.1.5", 24 | "html-webpack-plugin": "^2.30.1", 25 | "postcss-loader": "^2.0.8", 26 | "purify-css": "^1.2.5", 27 | "purifycss-webpack": "^0.7.0", 28 | "style-loader": "^0.19.0", 29 | "url-loader": "^0.6.2", 30 | "webpack": "^3.8.1", 31 | "webpack-dev-server": "^2.9.3" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /15.实战技巧：优雅打包第三方类库/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "server": "webpack-dev-server --open", 9 | "dev": "set type=dev&webpack", 10 | "build": "set type=build&webpack" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "autoprefixer": "^7.1.6", 16 | "babel-core": "^6.26.0", 17 | "babel-loader": "^7.1.2", 18 | "babel-preset-env": "^1.6.1", 19 | "babel-preset-es2015": "^6.24.1", 20 | "babel-preset-react": "^6.24.1", 21 | "css-loader": "^0.28.7", 22 | "extract-text-webpack-plugin": "^3.0.1", 23 | "file-loader": "^1.1.5", 24 | "html-webpack-plugin": "^2.30.1", 25 | "postcss-loader": "^2.0.8", 26 | "purify-css": "^1.2.5", 27 | "purifycss-webpack": "^0.7.0", 28 | "style-loader": "^0.19.0", 29 | "url-loader": "^0.6.2", 30 | "webpack": "^3.8.1", 31 | "webpack-dev-server": "^2.9.3" 32 | }, 33 | "dependencies": { 34 | "jquery": "^3.2.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /17.实战技巧：抽离打包的js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "server": "webpack-dev-server --open", 9 | "dev": "set type=dev&webpack", 10 | "build": "set type=build&webpack" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "autoprefixer": "^7.1.6", 16 | "babel-core": "^6.26.0", 17 | "babel-loader": "^7.1.2", 18 | "babel-preset-env": "^1.6.1", 19 | "babel-preset-es2015": "^6.24.1", 20 | "babel-preset-react": "^6.24.1", 21 | "css-loader": "^0.28.7", 22 | "extract-text-webpack-plugin": "^3.0.1", 23 | "file-loader": "^1.1.5", 24 | "html-webpack-plugin": "^2.30.1", 25 | "postcss-loader": "^2.0.8", 26 | "purify-css": "^1.2.5", 27 | "purifycss-webpack": "^0.7.0", 28 | "style-loader": "^0.19.0", 29 | "url-loader": "^0.6.2", 30 | "webpack": "^3.8.1", 31 | "webpack-dev-server": "^2.9.3" 32 | }, 33 | "dependencies": { 34 | "jquery": "^3.2.1", 35 | "vue": "^2.5.3" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "server": "webpack-dev-server --open", 9 | "dev": "set type=dev&webpack --watch", 10 | "build": "set type=build&webpack --watch" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "autoprefixer": "^7.1.6", 16 | "babel-core": "^6.26.0", 17 | "babel-loader": "^7.1.2", 18 | "babel-preset-env": "^1.6.1", 19 | "babel-preset-es2015": "^6.24.1", 20 | "babel-preset-react": "^6.24.1", 21 | "css-loader": "^0.28.7", 22 | "extract-text-webpack-plugin": "^3.0.1", 23 | "file-loader": "^1.1.5", 24 | "html-webpack-plugin": "^2.30.1", 25 | "postcss-loader": "^2.0.8", 26 | "purify-css": "^1.2.5", 27 | "purifycss-webpack": "^0.7.0", 28 | "style-loader": "^0.19.0", 29 | "url-loader": "^0.6.2", 30 | "webpack": "^3.8.1", 31 | "webpack-dev-server": "^2.9.3" 32 | }, 33 | "dependencies": { 34 | "jquery": "^3.2.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "server": "webpack-dev-server --open", 9 | "dev": "set type=dev&webpack", 10 | "build": "set type=build&webpack" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "autoprefixer": "^7.1.6", 16 | "babel-core": "^6.26.0", 17 | "babel-loader": "^7.1.2", 18 | "babel-preset-env": "^1.6.1", 19 | "babel-preset-es2015": "^6.24.1", 20 | "babel-preset-react": "^6.24.1", 21 | "copy-webpack-plugin": "^4.2.0", 22 | "css-loader": "^0.28.7", 23 | "extract-text-webpack-plugin": "^3.0.1", 24 | "file-loader": "^1.1.5", 25 | "html-webpack-plugin": "^2.30.1", 26 | "postcss-loader": "^2.0.8", 27 | "purify-css": "^1.2.5", 28 | "purifycss-webpack": "^0.7.0", 29 | "style-loader": "^0.19.0", 30 | "url-loader": "^0.6.2", 31 | "webpack": "^3.8.1", 32 | "webpack-dev-server": "^2.9.3" 33 | }, 34 | "dependencies": { 35 | "jquery": "^3.2.1", 36 | "vue": "^2.5.3" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "server": "webpack-dev-server --open", 9 | "dev": "set type=dev&webpack", 10 | "build": "set type=build&webpack" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "autoprefixer": "^7.1.6", 16 | "babel-core": "^6.26.0", 17 | "babel-loader": "^7.1.2", 18 | "babel-preset-env": "^1.6.1", 19 | "babel-preset-es2015": "^6.24.1", 20 | "babel-preset-react": "^6.24.1", 21 | "copy-webpack-plugin": "^4.2.0", 22 | "css-loader": "^0.28.7", 23 | "extract-text-webpack-plugin": "^3.0.1", 24 | "file-loader": "^1.1.5", 25 | "html-webpack-plugin": "^2.30.1", 26 | "postcss-loader": "^2.0.8", 27 | "purify-css": "^1.2.5", 28 | "purifycss-webpack": "^0.7.0", 29 | "style-loader": "^0.19.0", 30 | "url-loader": "^0.6.2", 31 | "webpack": "^3.8.1", 32 | "webpack-dev-server": "^2.9.3" 33 | }, 34 | "dependencies": { 35 | "jquery": "^3.2.1", 36 | "vue": "^2.5.3" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /04.CSS文件打包/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 引入webpack 4 | const webpack = require('webpack'); 5 | module.exports = { 6 | //入口文件的配置项 7 | entry: { 8 | entry: './src/entry.js' 9 | }, 10 | //出口文件的配置项 11 | output: { 12 | //输出的路径，用了Node语法 13 | path: path.resolve(__dirname, 'dist'), 14 | //输出的文件名称 15 | filename: 'bundle.js' 16 | }, 17 | //模块：例如解读CSS,图片如何转换，压缩 18 | module: { 19 | rules: [{ 20 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 21 | test: /\.css$/, 22 | // loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错； 23 | use: ['style-loader', 'css-loader'] 24 | // include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选） 25 | // query：为loaders提供额外的设置选项（可选） 26 | }] 27 | }, 28 | //插件，用于生产模版和各项功能 29 | plugins: [ 30 | 31 | ], 32 | //配置webpack开发服务功能 33 | devServer: { 34 | //设置基本目录结构 35 | contentBase: path.resolve(__dirname, 'dist'), 36 | //服务器的IP地址，可以使用IP也可以使用localhost 37 | host: 'localhost', 38 | //服务端压缩是否开启 39 | compress: true, 40 | //配置服务端口号 41 | port: 9090 42 | } 43 | } -------------------------------------------------------------------------------- /05.插件配置：配置JS压缩/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 引入webpack 4 | const webpack = require('webpack'); 5 | // 压缩js 6 | const uglify = require('uglifyjs-webpack-plugin'); 7 | module.exports = { 8 | //入口文件的配置项 9 | entry: { 10 | entry: './src/entry.js' 11 | }, 12 | //出口文件的配置项 13 | output: { 14 | //输出的路径，用了Node语法 15 | path: path.resolve(__dirname, 'dist'), 16 | //输出的文件名称 17 | filename: 'bundle.js' 18 | }, 19 | //模块：例如解读CSS,图片如何转换，压缩 20 | module: { 21 | rules: [{ 22 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 23 | test: /\.css$/, 24 | // loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错； 25 | use: ['style-loader', 'css-loader'] 26 | // include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选） 27 | // query：为loaders提供额外的设置选项（可选） 28 | }] 29 | }, 30 | //插件，用于生产模版和各项功能 压缩 后 不能热更新！！！ 31 | plugins: [ 32 | new uglify() 33 | ], 34 | //配置webpack开发服务功能 35 | devServer: { 36 | //设置基本目录结构 37 | contentBase: path.resolve(__dirname, 'dist'), 38 | //服务器的IP地址，可以使用IP也可以使用localhost 39 | host: 'localhost', 40 | //服务端压缩是否开启 41 | compress: true, 42 | //配置服务端口号 43 | port: 9097 44 | } 45 | } -------------------------------------------------------------------------------- /06.插件配置：HTML文件的发布/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 引入webpack 4 | const webpack = require('webpack'); 5 | // 打包html 6 | const htmlPlugin= require('html-webpack-plugin'); 7 | // 压缩js 8 | const uglify = require('uglifyjs-webpack-plugin'); 9 | module.exports = { 10 | //入口文件的配置项 11 | entry: { 12 | entry: './src/js/entry.js' 13 | }, 14 | //出口文件的配置项 15 | output: { 16 | //输出的路径，用了Node语法 17 | path: path.resolve(__dirname, 'dist'), 18 | //输出的文件名称 19 | filename: 'js/bundle.js' 20 | }, 21 | //模块：例如解读CSS,图片如何转换，压缩 22 | module: { 23 | rules: [{ 24 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 25 | test: /\.css$/, 26 | // loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错； 27 | use: ['style-loader', 'css-loader'] 28 | // include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选） 29 | // query：为loaders提供额外的设置选项（可选） 30 | }] 31 | }, 32 | //插件，用于生产模版和各项功能 压缩 代码 热更新 会失效！！ 33 | plugins: [ 34 | // new uglify(), 35 | new htmlPlugin({ 36 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 37 | minify:{ 38 | removeAttributeQuotes:true 39 | }, 40 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 41 | hash:true, 42 | // 是要打包的html模版路径和文件名称 43 | template:'./src/index.html' 44 | 45 | }) 46 | ], 47 | //配置webpack开发服务功能 48 | devServer: { 49 | //设置基本目录结构 50 | contentBase: path.resolve(__dirname, 'dist'), 51 | //服务器的IP地址，可以使用IP也可以使用localhost 52 | host: 'localhost', 53 | //服务端压缩是否开启 54 | compress: true, 55 | //配置服务端口号 56 | port: 9098 57 | } 58 | } -------------------------------------------------------------------------------- /07.图片迈坑：CSS中的图片处理/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 引入webpack 4 | const webpack = require('webpack'); 5 | // 打包html 6 | const htmlPlugin= require('html-webpack-plugin'); 7 | // 压缩js 8 | const uglify = require('uglifyjs-webpack-plugin'); 9 | module.exports = { 10 | //入口文件的配置项 11 | entry: { 12 | entry: './src/js/entry.js' 13 | }, 14 | //出口文件的配置项 15 | output: { 16 | //输出的路径，用了Node语法 17 | path: path.resolve(__dirname, 'dist'), 18 | //输出的文件名称 19 | filename: 'js/bundle.js' 20 | }, 21 | //模块：例如解读CSS,图片如何转换，压缩 22 | module: { 23 | rules: [ 24 | { 25 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 26 | test: /\.css$/, 27 | // loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错； 28 | use: ['style-loader', 'css-loader'] 29 | // include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选） 30 | // query：为loaders提供额外的设置选项（可选） 31 | }, 32 | { 33 | test:/\.(png|jpg|gif)/ , 34 | // 指定使用的loader和loader的配置参数 35 | use:[{ 36 | loader:'url-loader', 37 | options:{ 38 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 39 | // limit:500000 40 | // 现在是以图片形式引入 41 | limit:50, 42 | // 指定图片输出的目录 43 | outputPath:'images/' 44 | } 45 | }] 46 | } 47 | ] 48 | }, 49 | //插件，用于生产模版和各项功能 压缩打开 热更新就会失效 50 | plugins: [ 51 | // new uglify(), 52 | new htmlPlugin({ 53 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 54 | minify:{ 55 | removeAttributeQuotes:true 56 | }, 57 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 58 | hash:true, 59 | // 是要打包的html模版路径和文件名称 60 | template:'./src/index.html' 61 | 62 | }) 63 | ], 64 | //配置webpack开发服务功能 65 | devServer: { 66 | //设置基本目录结构 67 | contentBase: path.resolve(__dirname, 'dist'), 68 | //服务器的IP地址，可以使用IP也可以使用localhost 69 | host: 'localhost', 70 | //服务端压缩是否开启 71 | compress: true, 72 | //配置服务端口号 73 | port: 9079 74 | } 75 | } -------------------------------------------------------------------------------- /08.图片迈坑：CSS分离与图片路径处理/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 引入webpack 4 | const webpack = require('webpack'); 5 | // 打包html 6 | const htmlPlugin= require('html-webpack-plugin'); 7 | // 压缩js 8 | const uglify = require('uglifyjs-webpack-plugin'); 9 | // 从js中分离css插件 10 | const extractTextPlugin = require("extract-text-webpack-plugin"); 11 | // 为处理路径 设置一个 绝对路径 12 | var website ={ 13 | publicPath:"http://192.168.1.101:9095/" 14 | } 15 | module.exports = { 16 | //入口文件的配置项 17 | entry: { 18 | entry: './src/js/entry.js' 19 | }, 20 | //出口文件的配置项 21 | output: { 22 | //输出的路径，用了Node语法 23 | path: path.resolve(__dirname, 'dist'), 24 | //输出的目录以及文件名称 25 | filename: 'js/bundle.js', 26 | // 处理分离后css路径对不上问题 27 | publicPath:website.publicPath 28 | }, 29 | //模块：例如解读CSS,图片如何转换，压缩 30 | module: { 31 | rules: [ 32 | { 33 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 34 | test: /\.css$/, 35 | // 引用分离css的plugin 36 | use: extractTextPlugin.extract({ 37 | fallback: "style-loader", 38 | use: "css-loader" 39 | }) 40 | }, 41 | { 42 | test:/\.(png|jpg|gif)/ , 43 | // 指定使用的loader和loader的配置参数 44 | use:[{ 45 | loader:'url-loader', 46 | options:{ 47 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 48 | // limit:500000 49 | // 现在是以图片形式引入 50 | limit:50, 51 | // 指定图片输出的目录 52 | outputPath:'images/' 53 | } 54 | }] 55 | } 56 | ] 57 | }, 58 | //插件，用于生产模版和各项功能 压缩 会让热更新失效 59 | plugins: [ 60 | // new uglify(), 61 | new htmlPlugin({ 62 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 63 | minify:{ 64 | removeAttributeQuotes:true 65 | }, 66 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 67 | hash:true, 68 | // 是要打包的html模版路径和文件名称 69 | template:'./src/index.html' 70 | 71 | }), 72 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 73 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 74 | new extractTextPlugin("css/index.css") 75 | ], 76 | //配置webpack开发服务功能 77 | devServer: { 78 | //设置基本目录结构 79 | contentBase: path.resolve(__dirname, 'dist'), 80 | //服务器的IP地址，可以使用IP也可以使用localhost 81 | host: '192.168.1.101', 82 | //服务端压缩是否开启 83 | compress: true, 84 | //配置服务端口号 85 | port: 9095 86 | } 87 | } -------------------------------------------------------------------------------- /10.CSS进阶：自动处理CSS3属性前缀/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 引入webpack 4 | const webpack = require('webpack'); 5 | // 打包html 6 | const htmlPlugin= require('html-webpack-plugin'); 7 | // 压缩js 8 | const uglify = require('uglifyjs-webpack-plugin'); 9 | // 从js中分离css插件 10 | const extractTextPlugin = require("extract-text-webpack-plugin"); 11 | // 为处理路径 设置一个 绝对路径 12 | var website ={ 13 | publicPath:"http://192.168.1.101:809/" 14 | } 15 | module.exports = { 16 | //入口文件的配置项 17 | entry: { 18 | entry: './src/js/entry.js' 19 | }, 20 | //出口文件的配置项 21 | output: { 22 | //输出的路径，用了Node语法 23 | path: path.resolve(__dirname, 'dist'), 24 | //输出的目录以及文件名称 25 | filename: 'js/bundle.js', 26 | // 处理分离后css路径对不上问题 27 | publicPath:website.publicPath 28 | }, 29 | //模块：例如解读CSS,图片如何转换，压缩 30 | module: { 31 | rules: [ 32 | { 33 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 34 | test: /\.css$/, 35 | // 引用分离css的plugin 36 | use: extractTextPlugin.extract({ 37 | fallback: "style-loader", 38 | use: [ 39 | { loader: 'css-loader', options: { importLoaders: 1 } }, 40 | 'postcss-loader' 41 | ] 42 | }) 43 | }, 44 | { 45 | test:/\.(png|jpg|gif)/ , 46 | // 指定使用的loader和loader的配置参数 47 | use:[{ 48 | loader:'url-loader', 49 | options:{ 50 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 51 | // limit:500000 52 | // 现在是以图片形式引入 53 | limit:50, 54 | // 指定图片输出的目录 55 | outputPath:'images/' 56 | } 57 | }] 58 | } 59 | ] 60 | }, 61 | //插件，用于生产模版和各项功能 压缩 会让热更新失效 62 | plugins: [ 63 | // new uglify(), 64 | new htmlPlugin({ 65 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 66 | minify:{ 67 | removeAttributeQuotes:true 68 | }, 69 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 70 | hash:true, 71 | // 是要打包的html模版路径和文件名称 72 | template:'./src/index.html' 73 | 74 | }), 75 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 76 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 77 | new extractTextPlugin("css/index.css") 78 | ], 79 | //配置webpack开发服务功能 80 | devServer: { 81 | //设置基本目录结构 82 | contentBase: path.resolve(__dirname, 'dist'), 83 | //服务器的IP地址，可以使用IP也可以使用localhost 84 | host: '192.168.1.101', 85 | //服务端压缩是否开启 86 | compress: true, 87 | //配置服务端口号 88 | port: 809 89 | } 90 | } -------------------------------------------------------------------------------- /11.CSS进阶：消除未使用的CSS/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 检查html模板，所以我们需要引入node的glob对象使用 4 | const glob = require('glob'); 5 | // 消除多余css 插件 6 | const PurifyCSSPlugin = require("purifycss-webpack"); 7 | // 引入webpack 8 | const webpack = require('webpack'); 9 | // 打包html 10 | const htmlPlugin= require('html-webpack-plugin'); 11 | // 压缩js 12 | const uglify = require('uglifyjs-webpack-plugin'); 13 | // 从js中分离css插件 14 | const extractTextPlugin = require("extract-text-webpack-plugin"); 15 | // 为处理路径 设置一个 绝对路径 16 | var website ={ 17 | publicPath:"http://192.168.1.101:802/" 18 | } 19 | module.exports = { 20 | //入口文件的配置项 21 | entry: { 22 | entry: './src/js/entry.js' 23 | }, 24 | //出口文件的配置项 25 | output: { 26 | //输出的路径，用了Node语法 27 | path: path.resolve(__dirname, 'dist'), 28 | //输出的目录以及文件名称 29 | filename: 'js/bundle.js', 30 | // 处理分离后css路径对不上问题 31 | publicPath:website.publicPath 32 | }, 33 | //模块：例如解读CSS,图片如何转换，压缩 34 | module: { 35 | rules: [ 36 | { 37 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 38 | test: /\.css$/, 39 | // 引用分离css的plugin 40 | use: extractTextPlugin.extract({ 41 | fallback: "style-loader", 42 | use: [ 43 | { loader: 'css-loader', options: { importLoaders: 1 } }, 44 | 'postcss-loader' 45 | ] 46 | }) 47 | }, 48 | { 49 | test:/\.(png|jpg|gif)/ , 50 | // 指定使用的loader和loader的配置参数 51 | use:[{ 52 | loader:'url-loader', 53 | options:{ 54 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 55 | // limit:500000 56 | // 现在是以图片形式引入 57 | limit:50, 58 | // 指定图片输出的目录 59 | outputPath:'images/' 60 | } 61 | }] 62 | } 63 | ] 64 | }, 65 | //插件，用于生产模版和各项功能 压缩 会让热更新失效 66 | plugins: [ 67 | // new uglify(), 68 | new htmlPlugin({ 69 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 70 | minify:{ 71 | removeAttributeQuotes:true 72 | }, 73 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 74 | hash:true, 75 | // 是要打包的html模版路径和文件名称 76 | template:'./src/index.html' 77 | }), 78 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 79 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 80 | new extractTextPlugin("css/index.css"), 81 | new PurifyCSSPlugin({ 82 | // 路劲扫描 nodejs内置 路劲检查 83 | paths: glob.sync(path.join(__dirname, 'src/*.html')) 84 | }) 85 | ], 86 | //配置webpack开发服务功能 87 | devServer: { 88 | //设置基本目录结构 89 | contentBase: path.resolve(__dirname, 'dist'), 90 | //服务器的IP地址，可以使用IP也可以使用localhost 91 | host: '192.168.1.101', 92 | //服务端压缩是否开启 93 | compress: true, 94 | //配置服务端口号 95 | port: 802 96 | } 97 | } 98 | 99 | -------------------------------------------------------------------------------- /09.CSS进阶：SASS文件的打包和分离/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 引入webpack 4 | const webpack = require('webpack'); 5 | // 打包html 6 | const htmlPlugin= require('html-webpack-plugin'); 7 | // 压缩js 8 | const uglify = require('uglifyjs-webpack-plugin'); 9 | // 从js中分离css插件 10 | const extractTextPlugin = require("extract-text-webpack-plugin"); 11 | // 为处理路径 设置一个 绝对路径 12 | var website ={ 13 | publicPath:"http://192.168.1.101:90/" 14 | } 15 | module.exports = { 16 | //入口文件的配置项 17 | entry: { 18 | entry: './src/js/entry.js' 19 | }, 20 | //出口文件的配置项 21 | output: { 22 | //输出的路径，用了Node语法 23 | path: path.resolve(__dirname, 'dist'), 24 | //输出的目录以及文件名称 25 | filename: 'js/bundle.js', 26 | // 处理分离后css路径对不上问题 27 | publicPath:website.publicPath 28 | }, 29 | //模块：例如解读CSS,图片如何转换，压缩 30 | module: { 31 | rules: [ 32 | { 33 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 34 | test: /\.css$/, 35 | // 引用分离css的plugin 36 | use: extractTextPlugin.extract({ 37 | fallback: "style-loader", 38 | use: "css-loader" 39 | }) 40 | }, 41 | { 42 | test:/\.(png|jpg|gif)/ , 43 | // 指定使用的loader和loader的配置参数 44 | use:[{ 45 | loader:'url-loader', 46 | options:{ 47 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 48 | // limit:500000 49 | // 现在是以图片形式引入 50 | limit:50, 51 | // 指定图片输出的目录 52 | outputPath:'images/' 53 | } 54 | }] 55 | }, 56 | // { 57 | // test: /\.scss$/, 58 | // // 需要注意的是loader的加载要有先后顺序。 59 | // use: [{ 60 | // loader: "style-loader" // creates style nodes from JS strings 61 | // }, { 62 | // loader: "css-loader" // translates CSS into CommonJS 63 | // }, { 64 | // loader: "sass-loader" // compiles Sass to CSS 65 | // }] 66 | // }, 67 | // 上面注释部门是 解析 sass的 下面的是从sass解析的css 中把css 分离出来 68 | { 69 | test: /\.scss$/, 70 | use: extractTextPlugin.extract({ 71 | use: [{ 72 | loader: "css-loader" 73 | }, { 74 | loader: "sass-loader" 75 | }], 76 | // use style-loader in development 77 | fallback: "style-loader" 78 | }) 79 | }, 80 | ] 81 | }, 82 | //插件，用于生产模版和各项功能 83 | plugins: [ 84 | // new uglify(), 压缩不能热更新 85 | new htmlPlugin({ 86 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 87 | minify:{ 88 | removeAttributeQuotes:true 89 | }, 90 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 91 | hash:true, 92 | // 是要打包的html模版路径和文件名称 93 | template:'./src/index.html' 94 | 95 | }), 96 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 97 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 98 | new extractTextPlugin("css/index.css") 99 | ], 100 | //配置webpack开发服务功能 101 | devServer: { 102 | //设置基本目录结构 103 | contentBase: path.resolve(__dirname, 'dist'), 104 | //服务器的IP地址，可以使用IP也可以使用localhost 105 | host: '192.168.1.101', 106 | //服务端压缩是否开启 107 | compress: true, 108 | //配置服务端口号 109 | port: 90 110 | } 111 | } -------------------------------------------------------------------------------- /12.给webpack增加babel支持/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 检查html模板，所以我们需要引入node的glob对象使用 配合purifycss-webpack使用 查找 4 | const glob = require('glob'); 5 | // 引入webpack 6 | const webpack = require('webpack'); 7 | // 打包html 8 | const htmlPlugin = require('html-webpack-plugin'); 9 | // 压缩js 10 | const uglify = require('uglifyjs-webpack-plugin'); 11 | // 从js中分离css插件 12 | const extractTextPlugin = require("extract-text-webpack-plugin"); 13 | // 消除无用的css 比如你写一个#demo 如果页面没有这个id 则会被消除 14 | const PurifyCSSPlugin = require("purifycss-webpack"); 15 | // 为处理路径 设置一个 绝对路径 16 | var website = { 17 | publicPath: "http://192.168.1.101:9080/" 18 | } 19 | module.exports = { 20 | //入口文件的配置项 21 | entry: { 22 | entry: './src/js/entry.js' 23 | }, 24 | //出口文件的配置项 25 | output: { 26 | //输出的路径，用了Node语法 27 | path: path.resolve(__dirname, 'dist'), 28 | //输出的目录以及文件名称 29 | filename: 'js/bundle.js', 30 | // 处理分离后css路径对不上问题 31 | publicPath: website.publicPath 32 | }, 33 | //模块：例如解读CSS,图片如何转换，压缩 34 | module: { 35 | rules: [ 36 | { 37 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 38 | test: /\.css$/, 39 | // 引用分离css的plugin 40 | use: extractTextPlugin.extract({ 41 | fallback: 'style-loader', 42 | use: [{ 43 | loader: 'css-loader', 44 | options: { 45 | importLoaders: 1 46 | } 47 | }, 48 | // 给css加前缀 49 | 'postcss-loader' 50 | ] 51 | }) 52 | 53 | }, 54 | 55 | { 56 | test: /\.(png|jpg|gif)/, 57 | // 指定使用的loader和loader的配置参数 58 | use: [{ 59 | loader: 'url-loader', 60 | options: { 61 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 62 | // limit:500000 63 | // 现在是以图片形式引入 64 | limit: 50, 65 | // 指定图片输出的目录 66 | outputPath: 'images/' 67 | } 68 | }] 69 | }, 70 | { 71 | test:/\.(jsx|js)$/, 72 | use:{ 73 | loader:'babel-loader', 74 | }, 75 | // 排除目录选项 76 | exclude:/node_modules/ 77 | } 78 | ] 79 | }, 80 | //插件，用于生产模版和各项功能 81 | plugins: [ 82 | // new uglify(), 83 | new htmlPlugin({ 84 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 85 | minify: { 86 | removeAttributeQuotes: true 87 | }, 88 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 89 | hash: true, 90 | // 是要打包的html模版路径和文件名称 91 | template: './src/index.html' 92 | 93 | }), 94 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 95 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 96 | new extractTextPlugin("css/index.css"), 97 | // 消除无用的css 98 | new PurifyCSSPlugin({ 99 | // 路径扫描 100 | paths: glob.sync(path.join(__dirname, 'src/*.html')), 101 | }) 102 | ], 103 | //配置webpack开发服务功能 104 | devServer: { 105 | //设置基本目录结构 106 | contentBase: path.resolve(__dirname, 'dist'), 107 | //服务器的IP地址，可以使用IP也可以使用localhost 108 | host: '192.168.1.101', 109 | //服务端压缩是否开启 110 | compress: true, 111 | //配置服务端口号 112 | port: 9080 113 | } 114 | } -------------------------------------------------------------------------------- /13.实战技巧：开发和生产并行设置/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 检查html模板，所以我们需要引入node的glob对象使用 配合purifycss-webpack使用 查找 4 | const glob = require('glob'); 5 | // 引入webpack 6 | const webpack = require('webpack'); 7 | // 打包html 8 | const htmlPlugin = require('html-webpack-plugin'); 9 | // 压缩js 10 | const uglify = require('uglifyjs-webpack-plugin'); 11 | // 从js中分离css插件 12 | const extractTextPlugin = require("extract-text-webpack-plugin"); 13 | // 消除无用的css 比如你写一个#demo 如果页面没有这个id 则会被消除 14 | const PurifyCSSPlugin = require("purifycss-webpack"); 15 | //如果你说我想看一下传过来的值到底是什么？可以用下面的输出语句。 16 | console.log( encodeURIComponent(process.env.type) ); 17 | // 为处理路径 设置一个 绝对路径 18 | if(process.env.type== "build"){ 19 | var website={ 20 | publicPath:"http://baidu.com:9090/" 21 | } 22 | }else{ 23 | var website={ 24 | publicPath:"http://192.168.1.101:9080/" 25 | } 26 | } 27 | module.exports = { 28 | //入口文件的配置项 29 | entry: { 30 | entry: './src/js/entry.js' 31 | }, 32 | //出口文件的配置项 33 | output: { 34 | //输出的路径，用了Node语法 35 | path: path.resolve(__dirname, 'dist'), 36 | //输出的目录以及文件名称 37 | filename: 'js/bundle.js', 38 | // 处理分离后css路径对不上问题 39 | publicPath: website.publicPath 40 | }, 41 | //模块：例如解读CSS,图片如何转换，压缩 42 | module: { 43 | rules: [ 44 | { 45 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 46 | test: /\.css$/, 47 | // 引用分离css的plugin 48 | use: extractTextPlugin.extract({ 49 | fallback: 'style-loader', 50 | use: [{ 51 | loader: 'css-loader', 52 | options: { 53 | importLoaders: 1 54 | } 55 | }, 56 | // 给css加前缀 57 | 'postcss-loader' 58 | ] 59 | }) 60 | 61 | }, 62 | 63 | { 64 | test: /\.(png|jpg|gif)/, 65 | // 指定使用的loader和loader的配置参数 66 | use: [{ 67 | loader: 'url-loader', 68 | options: { 69 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 70 | // limit:500000 71 | // 现在是以图片形式引入 72 | limit: 50, 73 | // 指定图片输出的目录 74 | outputPath: 'images/' 75 | } 76 | }] 77 | }, 78 | { 79 | test:/\.(jsx|js)$/, 80 | use:{ 81 | loader:'babel-loader', 82 | }, 83 | // 排除目录选项 84 | exclude:/node_modules/ 85 | } 86 | ] 87 | }, 88 | //插件，用于生产模版和各项功能 89 | plugins: [ 90 | // new uglify(), 91 | new htmlPlugin({ 92 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 93 | minify: { 94 | removeAttributeQuotes: true 95 | }, 96 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 97 | hash: true, 98 | // 是要打包的html模版路径和文件名称 99 | template: './src/index.html' 100 | 101 | }), 102 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 103 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 104 | new extractTextPlugin("css/index.css"), 105 | // 消除无用的css 106 | new PurifyCSSPlugin({ 107 | // 路径扫描 108 | paths: glob.sync(path.join(__dirname, 'src/*.html')), 109 | }) 110 | ], 111 | //配置webpack开发服务功能 112 | devServer: { 113 | //设置基本目录结构 114 | contentBase: path.resolve(__dirname, 'dist'), 115 | //服务器的IP地址，可以使用IP也可以使用localhost 116 | host: '192.168.1.101', 117 | //服务端压缩是否开启 118 | compress: true, 119 | //配置服务端口号 120 | port: 9080 121 | } 122 | } -------------------------------------------------------------------------------- /14.实战技巧：webpack模块化配置/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 检查html模板，所以我们需要引入node的glob对象使用 配合purifycss-webpack使用 查找 4 | const glob = require('glob'); 5 | // 引入webpack 6 | const webpack = require('webpack'); 7 | // 打包html 8 | const htmlPlugin = require('html-webpack-plugin'); 9 | // 压缩js 10 | const uglify = require('uglifyjs-webpack-plugin'); 11 | // 从js中分离css插件 12 | const extractTextPlugin = require("extract-text-webpack-plugin"); 13 | // 消除无用的css 比如你写一个#demo 如果页面没有这个id 则会被消除 14 | const PurifyCSSPlugin = require("purifycss-webpack"); 15 | // 模块化引入 16 | const entry = require('./webpack_config/webpack_entry.js'); 17 | //如果你说我想看一下传过来的值到底是什么？可以用下面的输出语句。 18 | console.log( encodeURIComponent(process.env.type) ); 19 | // 为处理路径 设置一个 绝对路径 20 | if(process.env.type== "build"){ 21 | var website={ 22 | publicPath:"http://baidu.com:9090/" 23 | } 24 | }else{ 25 | var website={ 26 | publicPath:"http://192.168.1.101:9099/" 27 | } 28 | } 29 | module.exports = { 30 | //入口文件的配置项 31 | entry: entry.path, 32 | //出口文件的配置项 33 | output: { 34 | //输出的路径，用了Node语法 35 | path: path.resolve(__dirname, 'dist'), 36 | //输出的目录以及文件名称 37 | filename: 'js/bundle.js', 38 | // 处理分离后css路径对不上问题 39 | publicPath: website.publicPath 40 | }, 41 | //模块：例如解读CSS,图片如何转换，压缩 42 | module: { 43 | rules: [ 44 | { 45 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 46 | test: /\.css$/, 47 | // 引用分离css的plugin 48 | use: extractTextPlugin.extract({ 49 | fallback: 'style-loader', 50 | use: [{ 51 | loader: 'css-loader', 52 | options: { 53 | importLoaders: 1 54 | } 55 | }, 56 | // 给css加前缀 57 | 'postcss-loader' 58 | ] 59 | }) 60 | 61 | }, 62 | 63 | { 64 | test: /\.(png|jpg|gif)/, 65 | // 指定使用的loader和loader的配置参数 66 | use: [{ 67 | loader: 'url-loader', 68 | options: { 69 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 70 | // limit:500000 71 | // 现在是以图片形式引入 72 | limit: 50, 73 | // 指定图片输出的目录 74 | outputPath: 'images/' 75 | } 76 | }] 77 | }, 78 | { 79 | test:/\.(jsx|js)$/, 80 | use:{ 81 | loader:'babel-loader', 82 | }, 83 | // 排除目录选项 84 | exclude:/node_modules/ 85 | } 86 | ] 87 | }, 88 | //插件，用于生产模版和各项功能 89 | plugins: [ 90 | // new uglify(), 91 | new htmlPlugin({ 92 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 93 | minify: { 94 | removeAttributeQuotes: true 95 | }, 96 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 97 | hash: true, 98 | // 是要打包的html模版路径和文件名称 99 | template: './src/index.html' 100 | 101 | }), 102 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 103 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 104 | new extractTextPlugin("css/index.css"), 105 | // 消除无用的css 106 | new PurifyCSSPlugin({ 107 | // 路径扫描 108 | paths: glob.sync(path.join(__dirname, 'src/*.html')), 109 | }) 110 | ], 111 | //配置webpack开发服务功能 112 | devServer: { 113 | //设置基本目录结构 114 | contentBase: path.resolve(__dirname, 'dist'), 115 | //服务器的IP地址，可以使用IP也可以使用localhost 116 | host: '192.168.1.101', 117 | //服务端压缩是否开启 118 | compress: true, 119 | //配置服务端口号 120 | port: 9002 121 | } 122 | } -------------------------------------------------------------------------------- /15.实战技巧：优雅打包第三方类库/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 检查html模板，所以我们需要引入node的glob对象使用 配合purifycss-webpack使用 查找 4 | const glob = require('glob'); 5 | // 引入webpack 6 | const webpack = require('webpack'); 7 | // 打包html 8 | const htmlPlugin = require('html-webpack-plugin'); 9 | // 压缩js 10 | const uglify = require('uglifyjs-webpack-plugin'); 11 | // 从js中分离css插件 12 | const extractTextPlugin = require("extract-text-webpack-plugin"); 13 | // 消除无用的css 比如你写一个#demo 如果页面没有这个id 则会被消除 14 | const PurifyCSSPlugin = require("purifycss-webpack"); 15 | //如果你说我想看一下传过来的值到底是什么？可以用下面的输出语句。 16 | console.log( encodeURIComponent(process.env.type) ); 17 | // 为处理路径 设置一个 绝对路径 18 | if(process.env.type== "build"){ 19 | var website={ 20 | publicPath:"http://baidu.com:9090/" 21 | } 22 | }else{ 23 | var website={ 24 | publicPath:"http://192.168.1.101:9080/" 25 | } 26 | } 27 | module.exports = { 28 | //入口文件的配置项 29 | entry: { 30 | entry: './src/js/entry.js' 31 | }, 32 | //出口文件的配置项 33 | output: { 34 | //输出的路径，用了Node语法 35 | path: path.resolve(__dirname, 'dist'), 36 | //输出的目录以及文件名称 37 | filename: 'js/bundle.js', 38 | // 处理分离后css路径对不上问题 39 | publicPath: website.publicPath 40 | }, 41 | //模块：例如解读CSS,图片如何转换，压缩 42 | module: { 43 | rules: [ 44 | { 45 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 46 | test: /\.css$/, 47 | // 引用分离css的plugin 48 | use: extractTextPlugin.extract({ 49 | fallback: 'style-loader', 50 | use: [{ 51 | loader: 'css-loader', 52 | options: { 53 | importLoaders: 1 54 | } 55 | }, 56 | // 给css加前缀 57 | 'postcss-loader' 58 | ] 59 | }) 60 | 61 | }, 62 | 63 | { 64 | test: /\.(png|jpg|gif)/, 65 | // 指定使用的loader和loader的配置参数 66 | use: [{ 67 | loader: 'url-loader', 68 | options: { 69 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 70 | // limit:500000 71 | // 现在是以图片形式引入 72 | limit: 50, 73 | // 指定图片输出的目录 74 | outputPath: 'images/' 75 | } 76 | }] 77 | }, 78 | { 79 | test:/\.(jsx|js)$/, 80 | use:{ 81 | loader:'babel-loader', 82 | }, 83 | // 排除目录选项 84 | exclude:/node_modules/ 85 | } 86 | ] 87 | }, 88 | //插件，用于生产模版和各项功能 89 | plugins: [ 90 | // ProvidePlugin是一个webpack自带的插件，Provide的意思就是装备、提供。因为ProvidePlugin是webpack自带的插件，所以要先再webpack.config.js中引入webpack。 91 | new webpack.ProvidePlugin({ 92 | $:"jquery" 93 | }), 94 | // new uglify(), 95 | new htmlPlugin({ 96 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 97 | minify: { 98 | removeAttributeQuotes: true 99 | }, 100 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 101 | hash: true, 102 | // 是要打包的html模版路径和文件名称 103 | template: './src/index.html' 104 | 105 | }), 106 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 107 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 108 | new extractTextPlugin("css/index.css"), 109 | // 消除无用的css 110 | new PurifyCSSPlugin({ 111 | // 路径扫描 112 | paths: glob.sync(path.join(__dirname, 'src/*.html')), 113 | }) 114 | ], 115 | //配置webpack开发服务功能 116 | devServer: { 117 | //设置基本目录结构 118 | contentBase: path.resolve(__dirname, 'dist'), 119 | //服务器的IP地址，可以使用IP也可以使用localhost 120 | host: '192.168.1.101', 121 | //服务端压缩是否开启 122 | compress: true, 123 | //配置服务端口号 124 | port: 9006 125 | } 126 | } -------------------------------------------------------------------------------- /16.实战技巧：watch的正确使用方法（热打包）以及教你怎么写注释/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 检查html模板，所以我们需要引入node的glob对象使用 配合purifycss-webpack使用 查找 4 | const glob = require('glob'); 5 | // 引入webpack 6 | const webpack = require('webpack'); 7 | // 打包html 8 | const htmlPlugin = require('html-webpack-plugin'); 9 | // 压缩js 10 | const uglify = require('uglifyjs-webpack-plugin'); 11 | // 从js中分离css插件 12 | const extractTextPlugin = require("extract-text-webpack-plugin"); 13 | // 消除无用的css 比如你写一个#demo 如果页面没有这个id 则会被消除 14 | const PurifyCSSPlugin = require("purifycss-webpack"); 15 | //如果你说我想看一下传过来的值到底是什么？可以用下面的输出语句。 16 | console.log( encodeURIComponent(process.env.type) ); 17 | // 为处理路径 设置一个 绝对路径 18 | if(process.env.type== "build"){ 19 | var website={ 20 | publicPath:"http://baidu.com:9090/" 21 | } 22 | }else{ 23 | var website={ 24 | publicPath:"http://192.168.1.101:9080/" 25 | } 26 | } 27 | module.exports = { 28 | //入口文件的配置项 29 | entry: { 30 | entry: './src/js/entry.js' 31 | }, 32 | //出口文件的配置项 33 | output: { 34 | //输出的路径，用了Node语法 35 | path: path.resolve(__dirname, 'dist'), 36 | //输出的目录以及文件名称 37 | filename: 'js/bundle.js', 38 | // 处理分离后css路径对不上问题 39 | publicPath: website.publicPath 40 | }, 41 | //模块：例如解读CSS,图片如何转换，压缩 42 | module: { 43 | rules: [ 44 | { 45 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 46 | test: /\.css$/, 47 | // 引用分离css的plugin 48 | use: extractTextPlugin.extract({ 49 | fallback: 'style-loader', 50 | use: [{ 51 | loader: 'css-loader', 52 | options: { 53 | importLoaders: 1 54 | } 55 | }, 56 | // 给css加前缀 57 | 'postcss-loader' 58 | ] 59 | }) 60 | 61 | }, 62 | 63 | { 64 | test: /\.(png|jpg|gif)/, 65 | // 指定使用的loader和loader的配置参数 66 | use: [{ 67 | loader: 'url-loader', 68 | options: { 69 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 70 | // limit:500000 71 | // 现在是以图片形式引入 72 | limit: 50, 73 | // 指定图片输出的目录 74 | outputPath: 'images/' 75 | } 76 | }] 77 | }, 78 | { 79 | test:/\.(jsx|js)$/, 80 | use:{ 81 | loader:'babel-loader', 82 | }, 83 | // 排除目录选项 84 | exclude:/node_modules/ 85 | } 86 | ] 87 | }, 88 | //插件，用于生产模版和各项功能 89 | plugins: [ 90 | // 打包代码写入注释 91 | new webpack.BannerPlugin('小智打包注释') 92 | // ProvidePlugin是一个webpack自带的插件，Provide的意思就是装备、提供。因为ProvidePlugin是webpack自带的插件，所以要先再webpack.config.js中引入webpack。 93 | new webpack.ProvidePlugin({ 94 | $:"jquery" 95 | }), 96 | // new uglify(), 97 | new htmlPlugin({ 98 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 99 | minify: { 100 | removeAttributeQuotes: true 101 | }, 102 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 103 | hash: true, 104 | // 是要打包的html模版路径和文件名称 105 | template: './src/index.html' 106 | 107 | }), 108 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 109 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 110 | new extractTextPlugin("css/index.css"), 111 | // 消除无用的css 112 | new PurifyCSSPlugin({ 113 | // 路径扫描 114 | paths: glob.sync(path.join(__dirname, 'src/*.html')), 115 | }) 116 | ], 117 | //配置webpack开发服务功能 118 | devServer: { 119 | //设置基本目录结构 120 | contentBase: path.resolve(__dirname, 'dist'), 121 | //服务器的IP地址，可以使用IP也可以使用localhost 122 | host: '192.168.1.101', 123 | //服务端压缩是否开启 124 | compress: true, 125 | //配置服务端口号 126 | port: 9006 127 | }, 128 | // 这只是配置项 webpack --watch 还是要写这个 但是如果package.json里面写了就不用这么麻烦了写 --watch 129 | watchOptions:{ 130 | //检测修改的时间，以毫秒为单位 131 | poll:1000, 132 | //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作 133 | aggregeateTimeout:500, 134 | //不监听的目录 135 | ignored:/node_modules/ 136 | } 137 | } -------------------------------------------------------------------------------- /17.实战技巧：抽离打包的js/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 检查html模板，所以我们需要引入node的glob对象使用 配合purifycss-webpack使用 查找 4 | const glob = require('glob'); 5 | // 引入webpack 6 | const webpack = require('webpack'); 7 | // 打包html 8 | const htmlPlugin = require('html-webpack-plugin'); 9 | // 压缩js 10 | const uglify = require('uglifyjs-webpack-plugin'); 11 | // 从js中分离css插件 12 | const extractTextPlugin = require("extract-text-webpack-plugin"); 13 | // 消除无用的css 比如你写一个#demo 如果页面没有这个id 则会被消除 14 | const PurifyCSSPlugin = require("purifycss-webpack"); 15 | //如果你说我想看一下传过来的值到底是什么？可以用下面的输出语句。 16 | console.log( encodeURIComponent(process.env.type) ); 17 | // 为处理路径 设置一个 绝对路径 18 | if(process.env.type== "build"){ 19 | var website={ 20 | publicPath:"http://baidu.com:9090/" 21 | } 22 | }else{ 23 | var website={ 24 | publicPath:"http://192.168.1.101:9080/" 25 | } 26 | } 27 | module.exports = { 28 | //入口文件的配置项 29 | entry: { 30 | entry: './src/js/entry.js', 31 | jquery: 'jquery', 32 | vue: 'vue' 33 | }, 34 | //出口文件的配置项 35 | output: { 36 | //输出的路径，用了Node语法 37 | path: path.resolve(__dirname, 'dist'), 38 | //输出的目录以及文件名称 39 | filename: 'js/bundle.js', 40 | // 处理分离后css路径对不上问题 41 | publicPath: website.publicPath 42 | }, 43 | //模块：例如解读CSS,图片如何转换，压缩 44 | module: { 45 | rules: [ 46 | { 47 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 48 | test: /\.css$/, 49 | // 引用分离css的plugin 50 | use: extractTextPlugin.extract({ 51 | fallback: 'style-loader', 52 | use: [{ 53 | loader: 'css-loader', 54 | options: { 55 | importLoaders: 1 56 | } 57 | }, 58 | // 给css加前缀 59 | 'postcss-loader' 60 | ] 61 | }) 62 | 63 | }, 64 | 65 | { 66 | test: /\.(png|jpg|gif)/, 67 | // 指定使用的loader和loader的配置参数 68 | use: [{ 69 | loader: 'url-loader', 70 | options: { 71 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 72 | // limit:500000 73 | // 现在是以图片形式引入 74 | limit: 50, 75 | // 指定图片输出的目录 76 | outputPath: 'images/' 77 | } 78 | }] 79 | }, 80 | { 81 | test:/\.(jsx|js)$/, 82 | use:{ 83 | loader:'babel-loader', 84 | }, 85 | // 排除目录选项 86 | exclude:/node_modules/ 87 | } 88 | ] 89 | }, 90 | //插件，用于生产模版和各项功能 91 | plugins: [ 92 | // webpack自带插件所以不用你去在最上面require引入 93 | new webpack.optimize.CommonsChunkPlugin({ 94 | //name对应入口文件中的名字，我们起的是jQuery 95 | name: ['jquery', 'vue'], 96 | //把文件打包到哪里，是一个路径 97 | filename: "assets/js/[name].js", 98 | //最小打包的文件模块数，这里直接写2就好 99 | minChunks: 2 100 | }), 101 | // ProvidePlugin是一个webpack自带的插件，Provide的意思就是装备、提供。因为ProvidePlugin是webpack自带的插件，所以要先再webpack.config.js中引入webpack。 102 | new webpack.ProvidePlugin({ 103 | $:"jquery" 104 | }), 105 | // new uglify(), 106 | new htmlPlugin({ 107 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 108 | minify: { 109 | removeAttributeQuotes: true 110 | }, 111 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 112 | hash: true, 113 | // 是要打包的html模版路径和文件名称 114 | template: './src/index.html' 115 | 116 | }), 117 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 118 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 119 | new extractTextPlugin("css/index.css"), 120 | // 消除无用的css 121 | new PurifyCSSPlugin({ 122 | // 路径扫描 123 | paths: glob.sync(path.join(__dirname, 'src/*.html')), 124 | }) 125 | ], 126 | //配置webpack开发服务功能 127 | devServer: { 128 | //设置基本目录结构 129 | contentBase: path.resolve(__dirname, 'dist'), 130 | //服务器的IP地址，可以使用IP也可以使用localhost 131 | host: '192.168.1.101', 132 | //服务端压缩是否开启 133 | compress: true, 134 | //配置服务端口号 135 | port: 9080 136 | } 137 | } -------------------------------------------------------------------------------- /18.实战技巧：打包静态资源进项目目录/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 检查html模板，所以我们需要引入node的glob对象使用 配合purifycss-webpack使用 查找 4 | const glob = require('glob'); 5 | // 引入webpack 6 | const webpack = require('webpack'); 7 | // 打包html 8 | const htmlPlugin = require('html-webpack-plugin'); 9 | // 压缩js 10 | const uglify = require('uglifyjs-webpack-plugin'); 11 | // 从js中分离css插件 12 | const extractTextPlugin = require("extract-text-webpack-plugin"); 13 | // 消除无用的css 比如你写一个#demo 如果页面没有这个id 则会被消除 14 | const PurifyCSSPlugin = require("purifycss-webpack"); 15 | // 打包静态资源插件 16 | const copyWebpackPlugin = require("copy-webpack-plugin"); 17 | //如果你说我想看一下传过来的值到底是什么？可以用下面的输出语句。 18 | console.log( encodeURIComponent(process.env.type) ); 19 | // 为处理路径 设置一个 绝对路径 20 | if(process.env.type== "build"){ 21 | var website={ 22 | publicPath:"http://baidu.com:9090/" 23 | } 24 | }else{ 25 | var website={ 26 | publicPath:"http://192.168.1.101:9080/" 27 | } 28 | } 29 | module.exports = { 30 | //入口文件的配置项 31 | entry: { 32 | entry: './src/js/entry.js', 33 | jquery: 'jquery', 34 | vue: 'vue' 35 | }, 36 | //出口文件的配置项 37 | output: { 38 | //输出的路径，用了Node语法 39 | path: path.resolve(__dirname, 'dist'), 40 | //输出的目录以及文件名称 41 | filename: 'js/bundle.js', 42 | // 处理分离后css路径对不上问题 43 | publicPath: website.publicPath 44 | }, 45 | //模块：例如解读CSS,图片如何转换，压缩 46 | module: { 47 | rules: [ 48 | { 49 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 50 | test: /\.css$/, 51 | // 引用分离css的plugin 52 | use: extractTextPlugin.extract({ 53 | fallback: 'style-loader', 54 | use: [{ 55 | loader: 'css-loader', 56 | options: { 57 | importLoaders: 1 58 | } 59 | }, 60 | // 给css加前缀 61 | 'postcss-loader' 62 | ] 63 | }) 64 | 65 | }, 66 | 67 | { 68 | test: /\.(png|jpg|gif)/, 69 | // 指定使用的loader和loader的配置参数 70 | use: [{ 71 | loader: 'url-loader', 72 | options: { 73 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 74 | // limit:500000 75 | // 现在是以图片形式引入 76 | limit: 50, 77 | // 指定图片输出的目录 78 | outputPath: 'images/' 79 | } 80 | }] 81 | }, 82 | { 83 | test:/\.(jsx|js)$/, 84 | use:{ 85 | loader:'babel-loader', 86 | }, 87 | // 排除目录选项 88 | exclude:/node_modules/ 89 | } 90 | ] 91 | }, 92 | //插件，用于生产模版和各项功能 93 | plugins: [ 94 | // 打包静态资源 95 | new copyWebpackPlugin([{ 96 | from: __dirname + '/src/public', 97 | to: './public' 98 | }]), 99 | // webpack自带插件所以不用你去在最上面require引入 100 | new webpack.optimize.CommonsChunkPlugin({ 101 | //name对应入口文件中的名字，我们起的是jQuery 102 | name: ['jquery', 'vue'], 103 | //把文件打包到哪里，是一个路径 104 | filename: "assets/js/[name].js", 105 | //最小打包的文件模块数，这里直接写2就好 106 | minChunks: 2 107 | }), 108 | // ProvidePlugin是一个webpack自带的插件，Provide的意思就是装备、提供。因为ProvidePlugin是webpack自带的插件，所以要先再webpack.config.js中引入webpack。 109 | new webpack.ProvidePlugin({ 110 | $:"jquery" 111 | }), 112 | // new uglify(), 113 | new htmlPlugin({ 114 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 115 | minify: { 116 | removeAttributeQuotes: true 117 | }, 118 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 119 | hash: true, 120 | // 是要打包的html模版路径和文件名称 121 | template: './src/index.html' 122 | 123 | }), 124 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 125 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 126 | new extractTextPlugin("css/index.css"), 127 | // 消除无用的css 128 | new PurifyCSSPlugin({ 129 | // 路径扫描 130 | paths: glob.sync(path.join(__dirname, 'src/*.html')), 131 | }) 132 | ], 133 | //配置webpack开发服务功能 134 | devServer: { 135 | //设置基本目录结构 136 | contentBase: path.resolve(__dirname, 'dist'), 137 | //服务器的IP地址，可以使用IP也可以使用localhost 138 | host: '192.168.1.101', 139 | //服务端压缩是否开启 140 | compress: true, 141 | //配置服务端口号 142 | port: 9080 143 | } 144 | } -------------------------------------------------------------------------------- /19.实战技巧：引入json并使用以及局部刷新插件（内置的）/webpack.config.js: -------------------------------------------------------------------------------- 1 | // node中的引入路径模块 2 | const path = require('path'); 3 | // 检查html模板，所以我们需要引入node的glob对象使用 配合purifycss-webpack使用 查找 4 | const glob = require('glob'); 5 | // 引入webpack 6 | const webpack = require('webpack'); 7 | // 打包html 8 | const htmlPlugin = require('html-webpack-plugin'); 9 | // 压缩js 10 | const uglify = require('uglifyjs-webpack-plugin'); 11 | // 从js中分离css插件 12 | const extractTextPlugin = require("extract-text-webpack-plugin"); 13 | // 消除无用的css 比如你写一个#demo 如果页面没有这个id 则会被消除 14 | const PurifyCSSPlugin = require("purifycss-webpack"); 15 | // 打包静态资源插件 16 | const copyWebpackPlugin = require("copy-webpack-plugin"); 17 | //如果你说我想看一下传过来的值到底是什么？可以用下面的输出语句。 18 | console.log( encodeURIComponent(process.env.type) ); 19 | // 为处理路径 设置一个 绝对路径 20 | if(process.env.type== "build"){ 21 | var website={ 22 | publicPath:"http://baidu.com:9090/" 23 | } 24 | }else{ 25 | var website={ 26 | publicPath:"http://192.168.1.101:8090/" 27 | } 28 | } 29 | module.exports = { 30 | //入口文件的配置项 31 | entry: { 32 | entry: './src/js/entry.js', 33 | jquery: 'jquery', 34 | vue: 'vue' 35 | }, 36 | //出口文件的配置项 37 | output: { 38 | //输出的路径，用了Node语法 39 | path: path.resolve(__dirname, 'dist'), 40 | //输出的目录以及文件名称 41 | filename: 'js/bundle.js', 42 | // 处理分离后css路径对不上问题 43 | publicPath: website.publicPath 44 | }, 45 | //模块：例如解读CSS,图片如何转换，压缩 46 | module: { 47 | rules: [ 48 | { 49 | // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； 50 | test: /\.css$/, 51 | // 引用分离css的plugin 52 | use: extractTextPlugin.extract({ 53 | fallback: 'style-loader', 54 | use: [{ 55 | loader: 'css-loader', 56 | options: { 57 | importLoaders: 1 58 | } 59 | }, 60 | // 给css加前缀 61 | 'postcss-loader' 62 | ] 63 | }) 64 | 65 | }, 66 | 67 | { 68 | test: /\.(png|jpg|gif)/, 69 | // 指定使用的loader和loader的配置参数 70 | use: [{ 71 | loader: 'url-loader', 72 | options: { 73 | // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入 74 | // limit:500000 75 | // 现在是以图片形式引入 76 | limit: 50, 77 | // 指定图片输出的目录 78 | outputPath: 'images/' 79 | } 80 | }] 81 | }, 82 | { 83 | test:/\.(jsx|js)$/, 84 | use:{ 85 | loader:'babel-loader', 86 | }, 87 | // 排除目录选项 88 | exclude:/node_modules/ 89 | } 90 | ] 91 | }, 92 | //插件，用于生产模版和各项功能 93 | plugins: [ 94 | // 打包静态资源 95 | new copyWebpackPlugin([{ 96 | from: __dirname + '/src/public', 97 | to: './public' 98 | }]), 99 | // webpack自带插件所以不用你去在最上面require引入 100 | new webpack.optimize.CommonsChunkPlugin({ 101 | //name对应入口文件中的名字，我们起的是jQuery 102 | name: ['jquery', 'vue'], 103 | //把文件打包到哪里，是一个路径 104 | filename: "assets/js/[name].js", 105 | //最小打包的文件模块数，这里直接写2就好 106 | minChunks: 2 107 | }), 108 | // ProvidePlugin是一个webpack自带的插件，Provide的意思就是装备、提供。因为ProvidePlugin是webpack自带的插件，所以要先再webpack.config.js中引入webpack。 109 | new webpack.ProvidePlugin({ 110 | $:"jquery" 111 | }), 112 | // 压缩js 选择压缩不会刷新页面 113 | // new uglify(), 114 | // 局部热更新 webpack 自带插件所以不用require的方式引入进来 115 | new webpack.HotModuleReplacementPlugin(), 116 | new htmlPlugin({ 117 | // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号 118 | minify: { 119 | removeAttributeQuotes: true 120 | }, 121 | // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS 122 | hash: true, 123 | // 是要打包的html模版路径和文件名称 124 | template: './src/index.html' 125 | 126 | }), 127 | // 从js中分离css /css/index.css是设置分离后的路径 除此之外还要修改css-loader的写法 128 | // 分离出来后图片路径不对 用publicPath解决 在output中设置 129 | new extractTextPlugin("css/index.css"), 130 | // 消除无用的css 131 | new PurifyCSSPlugin({ 132 | // 路径扫描 133 | paths: glob.sync(path.join(__dirname, 'src/*.html')), 134 | }) 135 | ], 136 | //配置webpack开发服务功能 137 | devServer: { 138 | //设置基本目录结构 139 | contentBase: path.resolve(__dirname, 'dist'), 140 | //服务器的IP地址，可以使用IP也可以使用localhost 141 | host: '192.168.1.101', 142 | //服务端压缩是否开启 143 | compress: true, 144 | //配置服务端口号 145 | port: 8090 146 | } 147 | } --------------------------------------------------------------------------------