java企业级电商 initial总结

最新推荐文章于 2024-07-08 17:34:09 发布

^BonnenuIt

最新推荐文章于 2024-07-08 17:34:09 发布

阅读量208

点赞数

分类专栏： java企业级电商平台文章标签： webpack npm

本文链接：https://blog.csdn.net/qq_42434336/article/details/112394504

版权

java企业级电商平台专栏收录该内容

1 篇文章 0 订阅

订阅专栏

git 仓库建立及目录划分

git 权限配置
注意添加个人公钥，不是部署公钥
ssh-keygen -t rsa -C “your_email@example.com”
cat …public
gitignore配置
无需上传？

.DS_Store
/node_modules/
/dist/
npm-debug.log

git上传

git merge origin master
git tag tag-dev-initial
git push origin tag-dev-initial

git status
git add .
git commit -am ' '
git push

git分支使用规范

切换主分支 git init
新建并切换分支  git checkout -b mall -v1.0
查看分支 git branch

npm

npm install -g --registry=https://registry.npm.taobao.org
npm install webpack -g 全局安装
npm install webpack@1.15.0 --save-dev 项目依赖
cat package.json

npm自定义命令

// 环境变量配置，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/');
}

"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"
  },

webpack

说实话还是不知道干啥用，具体概念是啥

webpack.config.js进化过程

webpack 对脚本处理
js的loader
js 多入口配置

目标文件按文件类别分开存放
var config = {
    entry:{
        'common':['./src/page/common/index.js'],
        'index':['./src/page/index/index.js'],
        'login':['./src/page/login/index.js']
    } ,
    output: {
        filename: 'js/[name].js',//分开目录
        publicPath : '/dist', 
        path: './dist'//主目录
    }
}
module.exports=config;

jquery 引入方法

  externals: {
        'jquery':'window.jQuery'
    },

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

提取通用模块

plugins:[
        //独立通用模板到js/base.js
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/base.js'
        }),

对样式的处理
加载css 的loader
css打包成单独文件

module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },

//css单独打包到文件里
        new ExtractTextPlugin("css/[name].css"),

webpack 对Html模板的处理
html-webpack-plugin
多页应用里Html的处理

 //html模板的处理
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('login')),

//获取HtmlWebpackPlugin参数方法
var getHtmlConfig=function (name) {
    return{
        template:'./src/view/' + name +'.html',
        filename:'view/' + name +'.html',
        inject:true,
        hash:true,
        chunks:['common',name]
    };
};
//通用Html模板的处理方法
<head>
    <%= require('html-loader!./layout/html-head.html')  %>
</head>

webpack对图片和icon-font的处理
静态资源使用的Loader
url-loader里参数的配置

 { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' },
            { test: /\.string$/, loader: 'html-loader'}

webpack-dev-server
可以实时更新页面（两台电脑俺没有）
webpack 命令和npm自定义命令的结合（见上）
环境变量设置和读取方法

^BonnenuIt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
java企业级电商 initial总结

git 仓库建立及目录划分git 权限配置注意添加个人公钥，不是部署公钥ssh-keygen -t rsa -C “your_email@example.com”cat …publicgitignore配置无需上传？.DS_Store/node_modules//dist/npm-debug.log git上传git merge origin mastergit tag tag-dev-initialgit push origin tag-dev-initialgit st
复制链接

扫一扫