柏林家政网站重构项目（一）
第一部分
一、技术选型：
前台：
1.webpack4.x 2.git 3.jquery2.1.4版本
后台：
1.vue.js
二、目录结构设计：
src(代码编写文件夹，目标文件)====>其下属文件有：
page+view
service
util
image最后都会打包到dist文件夹，不需要手工去维护===>其下属文件：
view
js
css
resource三，项目搭建：
1.git创建仓库，然后用 git clone克隆到本地
2.创建.gitignore文件，写上内容：
.DS_Store
/node_modules/
/dist/3.使用git add 此命令可将该文件添加到缓存
4.$ git commit -m ‘gitigoner文件提交’
5.一般来说我们都不是在主分支开发，因此我们需要建立一个分支来进行业务逻辑的开发
命令使用：git checkout -b bolinjz_v1.0 (意思是切换并创建分支）再用git branch 查看分支带*号的表示当前所处分支。
四、手脚架的搭建：
1.npm 初始化 npm init
2.全局安装 webpack
我选用的webpack版本为最新的4.10.2，主要是我也不知道怎么选版本号，webpack4版本之前的我没学过，所以索性就下最新版的算了。
3.首先是在项目根目录
- –创建webpack.config.js
–然后对webpack进行配置，先是对入口文件和出口文件进行配置
const path = require('path');
module.exports = {
mode: 'development',
entry: {
'index':['./src/page/index/index.js'],
'login':['./src/page/login/index.js']//多入口配置
},
output: {
filename: '[name].js',
path: __dirname + '/dist/js'
}
}//详细介绍请看官方文档，挺详细的- –对脚本的处理
a、对jqure的引入，在webpack3.x的版本，jq的引入还是挺麻烦的，但是在webpac4.x这一现状得到改变，在webpack.config.js增加配置后如下（本来我是准备省略部分代码的，不过我这个是新生教程项目，所以我就还是不省略了，怕有小白看不懂，没法跑出项目的效果）：
var webpack = require('webpack')
const path = require('path');
module.exports = {
mode: 'development',
entry: {
'index':['./src/page/index/index.js'],
'login':['./src/page/login/index.js']
},
output: {
filename: 'js/[name].js',
path: __dirname + '/dist'
},
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
],
}然后就在入口的js文件引入jq即可，代码如下：
import $ from 'jquery'更简单的配置方式就是在index.html中用< script >引入jq。
--b、loader的配置
- 安装css-loader、style-loader、file-loader
- 安装命令：
npm install style-loader css-loader -D
npm install file-loader -D– 然后是在webpack.config.js中配置
module.exports = {
mode: 'development',
entry: {
'common':['./src/page/common/index.js'],
'index':['./src/page/index/index.js'],
'login':['./src/page/login/index.js']
},
output: {
filename: 'js/[name].js',
path: __dirname + '/dist'
},
module: {
rules: [
{ test: /\.css$/, use:['style-loader','css-loader'] },
{ test: /(\.jpg|\.png|\.jpeg|\.gif)$/, use:['file-loader']}，
{ test: /\.(woff|ttf|svg|eot|xttf|woff5)$/, use:'file-loader?limit=1024&name=./fonts/[name].[ext]'},
]
},//loader的配置
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
],
}然后是安装 html-withimg-loader 来支持 打包的html支持图片
安装命令：npm install html-withimg-loader -D
配置就是在moudle下再加个正则匹配：
{ test:/\.html$/,use:'html-withimg-loader'}4.plugin
1.安装 html-webpack-plugin 这个插件是打包HTML文件
安装命令：npm install html-webpack-plugin -D(S)
2.配置html-webpack-plugin
第一步：引入html-webpack-plugin== >const HtmlWebpackPlugin = require('html-webpack-plugin');
第二步：配置
plugins: [
//new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'a.html'//改html的输出文件名index.html改为了a.hmtl,
minify:{
removeAttributeQuotes:true,//去除引号
removeComments:true//去除注释
removeEmptyAttributes:true//去除空属性
collapseWhitespace:true//去除空格
}
})
]
3.css提取
插件下载：npm intall extract-text-webpack-plugin@next -D(s);
引入：const ExtractTextPlugin = require("extract-text-webpack-plugin")
然后对css-loader和style-loader进行改造：
......
module: {
rules: [
//{ test: /\.css$/, use:['style-loader','css-loader'] },
{ test: /\.css$/, use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:[{
loader:'css-loader?name=./css/[name].[ext]',
options:{
minimize:true,//代码压缩
}
}],
publicPath: "../"
})
},
{ test: /(\.jpg|\.png|\.jpeg|\.gif)$/, use:['file-loader']},
{ test: /\.(woff|ttf|svg|eot|xttf|woff5)$/, use:'file-loader?limit=1024&name=./fonts/[name].[ext]'},
{ test:/\.html$/,use:'html-withimg-loader'}
]
},
......这样之就能把css单独打包在dist的css文件夹。