需求拆分原则
1. 单个迭代不能太大
2. 需求可交付,功能闭环
3. 成本意识 二八法则
4. 预期价值体现
……………………………………………………………………………… 做
【直接 git clone】or【重新初始化】
cd <your-path>
git init
git remote add origin <url>
git pull origin master
git add .
git commit -am ""
git push
<要求设置一个上游分支>
【vim .gitignore】push之
git checkout -b <branchname_v1.0.0>
【structure】
$ ls
image/ page/ service/ util/ view/
【npm init】
【webpack】commonjs 过来的,前进是 ES6 。(进一步说明 loader是webpack核心)
npm install -g webpack@1.15.0 , 可以省略版本安装最新但最新的 命令要安装 webpack-cli
npm install webpack@1.15.0 --save-dev
【webpack <entry> <output> 演示目的】or 【webpack.config.js】
var config = { entry: { index: ['./src/page/index/index.js'], login: ['./src/page/login/index.js'], }, output: { path: './dist/', filename: 'js/[name].js', } }; module.exports = config;
【加载 window全局对象下 jQuery】
var config = { entry: { index: ['./src/page/index/index.js'], login: ['./src/page/login/index.js'], }, output: { path: './dist/', filename: 'js/[name].js', }, externals: { jquery: 'window.jQuery' } }; module.exports = config;
【使用 commonchunk plugin抽取公共模块】https://webpack.js.org/plugins/commons-chunk-plugin/#src/components/Sidebar/Sidebar.jsx
1. 注意 common 是一个公共全局模块
var webpack = require('webpack'); var config = { entry: { common: ['./src/page/common/index.js'], index: ['./src/page/index/index.js'], login: ['./src/page/login/index.js'], }, output: { path: './dist/', filename: 'js/[name].js', }, externals: { jquery: 'window.jQuery' }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: "js/base.js" }) ] }; module.exports = config;
【加载 css 的 loader】or 【单独打包 plugin + loader】
注意 ExtractTextPlugin + module loader配置
var ExtractTextPlugin = require("extract-text-webpack-plugin"); var webpack = require('webpack'); var config = { entry: { common: ['./src/page/common/index.js'], index: ['./src/page/index/index.js'], login: ['./src/page/login/index.js'], }, output: { path: './dist/', filename: 'js/[name].js', }, externals: { jquery: 'window.jQuery' }, module:{ loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") } ] }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: "js/base.js" }), new ExtractTextPlugin("css/[name].css") ] }; module.exports = config;
【html 模板处理】HtmlWebpackPlugin
// 获取HtmlWebpackPlugin配置 var getHtmlConfig = function (name) { return { template: 'src/view/' + name + '.html', filename: 'view/' + name + '.html', inject: true, hash: true, chunks: ['common', name], }; }; 。。。 plugins: [ // 独立通用模块抽取到 base.js new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: "js/base.js" }), // 单独打包 css new ExtractTextPlugin("css/[name].css"), // 打包 html 模板 new HtmlWebpackPlugin(getHtmlConfig('index')), new HtmlWebpackPlugin(getHtmlConfig('login')), ],
【进一步从 html 本身动手,抽取 <head>】npm i -D html-loader
module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' }, ] },
【自动刷新 webpack-dev-server】npm i -g webpack-dev-server@1.16.5
要执行 webpack-dev-server --inline --port 8088
先做这个事情
output: { path: './dist', publicPath : '/dist', //发布公共位置 filename: 'js/[name].js' },
最佳实践 WEBPACK_ENV + npm scripts
// 环境变量配置,dev / online var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev'; if('dev' === WEBPACK_ENV){ config.entry.common.push('webpack-dev-server/client?http://localhost:8088/'); }
修改成 npm scripts
"scripts": { "dev": "WEBPACK_ENV=dev webpack-dev-server --inline --port 8088", "dev_win": "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088", "dist": "WEBPACK_ENV=online webpack -p", "dist_win": "set WEBPACK_ENV=online && webpack -p" },
然后可以 npm run dev_win 运行命令~~~
【脚手架搭建好了】
git add .
git commit -am "脚手架搭建完成"
git push
git merge origin master
……………………………………………………………………………………………………想
【新建 git 项目】说的是 git init / git clone
【git 权限配置】说的 ssh
【gitignore】忽略且不跟踪的文件
【文件目录划分】Project structue
【git 分支使用规范】主干 + 分支 v1.0 这样方式迭代
【npm 初始化】npm init -> package.json
【安装/卸载 npm 包】npm i
【npm 机制】下载过放到 cache ,项目还是会下载一份。
【npm 命令】npm scripts
【webpack 设计思想】核心是 loader + plugin 。
【webpack 编译原理】/dist 处理方式 变成 base64 ,字符串 ,需要直接emmit源文件需要自己配置。
【webpack.config.js 演进】搭积木。
【js loader】
【js 多入口配置】
【目标文件按文件类别存放】
【jquery 引入方式】cdn window.jQuery
【提取通用模块】common插件,这个在webpack4.0版本已经废除。
【css loader】
【css 打包成单独文件】