biji

///////////////////////////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///////////////////////////////////  

相关文章
相关标签/搜索