免费网站模版,怎样创办自己的公众号,网站被墙,电商网站那些功能用到静态化功能webpack 4第1课 概念1 模块化工具 构建工具 打包工具2 webpack把所有的东西打包成js文件#xff0c;压缩图片#xff0c;把sass生成css,3 热加载4 自己有服务器第2课 安装1 先安装NodeJS node --version2 换成淘宝镜像 npm install -g cnpm --registryhttps://registry.np… webpack 4 第1课 概念 1 模块化工具 构建工具 打包工具 2 webpack把所有的东西打包成js文件压缩图片把sass生成css, 3 热加载 4 自己有服务器 第2课 安装 1 先安装NodeJS node --version 2 换成淘宝镜像 npm install -g cnpm --registryhttps://registry.npm.taobao.org 3 npm install -g webpack 4 或 npm install --save-dev webpack 第3课 实现Hello World 1 npm init 2 建好文件夹 src/app.js dist 3 装命令行包 npm install webpack-cli -g 4 正式开始 注意要设置环境类型 webpack src/app.js -o dist/bundle.js --mode development 如果写--mode production 则打出来的会是压缩版就一行 3.1 - 监控 加上实时监控 webpack src/app.js -o dist/bundle.js --mode development --watch 3.2 - 安装本地服务器 npm install -D webpack-dev-server 3.3 “__dirname”是node.js中的一个全局变量它指向当前执行脚本所在的目录 3.4 配置文件 webpack.config.js 2019-01-14 继续学 scss less 预处理器 1 可用命令来执行webpack但通过配置文件来使用webpack更好 2 使用webpack构建本地服务器 npm install --save-dev webpack-dev-server 3 devServer 是本地服务器的配置 4 loaders 可以把 scss 转换为 css可把React中的jsx转换成js babel核心功能位于哪个包里 babel-core babel里解析es6的包 babel-env-preset bable里解析jsx的包 babel-preset-react css-loader 可使用类似 import 和 url(...) 的方法实现require()的功能 style-loader 将所有计算后的样式加入页面 通过合适的配置webpack也可以把css打包为单独的文件 CSS modules 通过CSS模块所有的类名动画名默认都只作用于当前模块 css预处理器有哪些 sass less 在webpack里使用相关的loaders进行配置就可以使用css预处理器 Less Loader Sass Loader Styls Loader PostCSS是干什么的 为CSS代码添加适应不同浏览器的CSS前缀 安装PostCSS npm install --save-dev postcss-loader autoprefixer Plugins Webpack 里的 Loader 是干什么的 打包构建过程中来处理源文件的 jsx scss less 一次处理一个 webpack的插件 Plugins 有什么功能 它直接对整个构建过程起作用 HtmlWebpackPlugin 转载于:https://www.cnblogs.com/jason-beijing/p/10327419.html
