///////////////////////////devopen////////////////////////////
LTS版本
nvm 切换版本
npm init -y 初始化项目
npm install webpack --save-dev 安装webpack包
node_modules/.bin/www/webpack 编译命令css
编译生成html
cnpm install html-webpack-plugin --save-dev
webpack.config.js
编译日志:
Hash、 version、 timehtml
配置快捷命令: package.json文件中的`scripts`中配置
运行: npm run build(配置的命令名称)
查看命令: npm runnode
启动服务,自动刷新
webpack-dev-server
配置命令: package.json文件中的`scripts`中配置
修改ip,端口: webpack.config.js中添加devServer节点webpack
eslint代码检查 --fix自动修正
本地安装: eslint --save-dev
配置命令: "lintjs" : "eslint app/ webpack.*.js --cache"
视频中有eslint-loader ,
添加.eslintrc.js文件
npm run lintjs -- --fix //自动修正git
代码规范自动测试
eslint-loader包
配置: webpack.config.js中 添加module项
命令: npm run start
配置在浏览器中显示错误
webpack.config.js中配置 overlay:github
加载CSS
css-loader 处理@import url() 只处理加载本地资源
style-loader 处理style标签 【】从右到左处理
css做用域与css modulesweb
自动分离css到独立的文件,否则页面会闪动
安装抽取插件 extract-text-webpack-plugin
加配置代码webpack.config.js中npm
深刻loaderjson
文件js压缩
performance 压缩大小限制
安装插件压缩: babili-webpack-plugin
html,css也可经过插件压缩???浏览器
sourceMap 调试打包错误???
配置: devtool: 'source-map'
分离打包
vendor 自带配置
统计图表
webpack.github.io
webpack chart stats.json
stellar webpack
配置多页面编译
entry
部分刷新 热加载
////////////////////////CSN webpack///////////////////////////////////