132人加入学习
(0人评价)
Webpack3.X版 成神之路

webpack前端人必会的技能,让你工作顺畅起来。

价格 ¥ 48.00
音频听课 手机端支持一键听课 (试一试)

这个由于视频的时间原因 导致后来者观看的时候会发现 这边即使跟着敲代码也会报错,那是因为file-loader 的高版本导致的,需要降版本 降到0.8.5 就可以了 

[展开全文]

注意 extract-text-webpack-plugin  的版本号,必须是最新的npm install extract-text-webpack-plugin@next --save-dev

[展开全文]

因为4.x版本默认压缩,同样的代码不压缩4.x要比3.x小很多 4.x版本内置压缩js

[展开全文]

3.6以上配置完服务直接完成热更新

关键知识点 1. 安装 webpack-dev-server依赖包

2.配置 webpack.config.js 的devServer 文件

devServer: {

contentBase: path.resolve(__dirname, 'dist'),// 读取文件的绝对路径

host: '192.168.207.104',// 本地ip地址

compress: true,// 服务器压缩

port: 1717//端口号

}

3.配置package.json的script这样运行的时候只要输入命令npm run *** 即可dev 可为任何值

"scripts": {

"dev": "webpack-dev-server"

},

[展开全文]

npm install 

4.x 生成的是main.js,不新建bundle.js 无法打包成功,不需要指定位置  自动打包出main.js

 

live-server ????
 

[展开全文]

webpack3.x版本 是webpack+webpack_cli 在同一个包中,只需npm install webpack即可,

webpack 4.x版本需要分别 install webpack 与webpack_cli

[展开全文]

第四节:服务和热更新

DevSever:{

contentBase:path:resolve(__dirname,"dist"), 文件路径

host:"99.6.118.91",本机ip

compress:true,服务器压缩

port:8080,端口

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

去package.json下面配置script的  dev-server,npm run +配置的名字,服务就可以用啦 ,下面显示服务路径,热更新也自动生效(低版本可能没有该功能)。

[展开全文]

path  node内置
glob  node内置 结合xxx使用  完成xxx功能

[展开全文]

配置

devtool : "source-map "

 

插件的区别:

source-map 打包最慢,生成独立map文件,生成错误 行 列

cheap-moudle-source-map 独立map文件,生成错误 行 没有列

eval-source-map  打包快 没有独立文件,影响性能,开发阶段用,上线前重新打包 生成错误 行 列

cheap-moudle-eval-source-map  生成错误 列 没有行

 

 

[展开全文]

"babel-core": "^6.26.3",

"babel-loader": "^7.1.5",

[展开全文]

node-sass安装失败

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
[展开全文]

讲课用的 webpack3.6.0 

file-loader需安装 2.0.0版本,否则报错 

ERROR in ./src/images/47.jpg
Module build failed: ValidationError: File Loader Invalid Options

options should NOT have additional properties

at validateOptions (G:\test\webpackDemo\node_modules\schema-utils\src\validateOptions.js:32:11)
    at Object.loader (G:\test\webpackDemo\node_modules\file-loader\dist\index.js:21:28)
    at Object.loader (G:\test\webpackDemo\node_modules\url-loader\dist\index.js:76:19)

[展开全文]

安装:postcss-loader    

autoprefixer

 

module.exports={

plugins:[

require('autoprefixer')

]

}

 

[展开全文]