DUMP101 企业级电商FE

需求拆分原则

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】

【自带 loader 机制】

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

然后导入 <%= require('html-loader!./layout/head.html') %>

【assets 字体资源图片资源处理 loader】npm i -D url-loader@0.5.8 file-loader@0.11.1

   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 tag tag-dev-initial （大版本）

git push origin tag-dev-initial

……………………………………………………………………………………………………想

【新建 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 打包成单独文件】

posted @ 2018-06-29 19:49 chenhui7373 阅读(156) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

chenhui7373

DUMP101 企业级电商FE

公告