为什么我要用webpack,因为真香~(webpack-dev-server真香,热更新万岁!)
连手动刷新都不需要的编写代码o(╯□╰)o
1.讲下webpack的配置
我用了较多的webpack插件包来优化很多效果.
上图是我的package.json下载内容,我一个个讲过来,有发现错误的可以直接指出
- clean-webpack-plugin
清理dist文件夹用的,因为使用webpack打包的话,不会覆盖掉之前的输出文件,用这个插件可以在webpack前将dist(输出目录)文件夹删除 - css-loader file-loader
加载css使用,文件加载 - csv-loader xml-loader
加载csv文件格式使用,加载xml使用 - extract-text-webpack-plugin提取公共模块插件,4.0webpack已不能使用,替代插件
mini-css-extract-plugin - font-awesome字体库,类似的有iconMoon
- hogan.js,前端渲染模板(超级简单),npm中还有个hogan,不要安装错,要安装hogan.js
- html-loader,加载html使用,使用地方:
<head>
<%= require('html-loader!./layout/head-common.html') %>
<title>首页</title>
</head>
- html-webpack-plugin web模板插件,具体用法看config.js
- mini-css-extract-plugin 公共模块提取插件
- style-loader 配合css-loader等使用
webpack.config.js(重中之重)
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
//1.公共模块提取,不需要用到
// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
//webpack
const webpack = require('webpack');
//单独打包css
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
//环境变量配置 dev /online
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
//
function getHtmlPluginParams(name, title) {
return {
template : './src/view/' + name + '.html',
filename : 'view/' + name + '.html',
inject : true,
title : title,
hash : true,
chunks : ['common', name]
}
}
var config = {
//入口
entry: {
// common: ['./src/page/common/common.js'],
index: './src/page/index/index.js',
login: './src/page/login/login.js',
result: './src/page/result/index.js'
},
// devtool: 'inline-source-map',
mode: 'development', // 设置mode,4.0后webpack需要
//用于webpack-dev-server的观察路径
devServer: {
// contentBase: './dist',
inline: true,
// hot: true 不需要手动书写
},
resolve : {
//起别名
alias : {
node_modules : __dirname + '/node_modules',
util : __dirname + '/src/util',
page : __dirname + '/src/page',
// service : __dirname + '/src/service',
image : __dirname + '/src/image'
}
},
plugins: [
// new CleanWebpackPlugin(['dist']),
//html模板的处理
new HtmlWebpackPlugin(getHtmlPluginParams('index', '首页')),
new HtmlWebpackPlugin(getHtmlPluginParams('login', '用户登录')),
new HtmlWebpackPlugin(getHtmlPluginParams('result', '操作结果')),
//清理dist文件夹
new CleanWebpackPlugin(['dist']),
//热更新使用
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
// 公共模块打包,webpack4.+已弃用
// new webpack.optimize.CommonsChunkPlugin({
// name : 'common',
// filename : 'js/base.js'
// })
//CSS单独打包
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "[id].css"
})
],
output: {
filename: 'js/[name].js',
//输出文件的路径
path: path.resolve(__dirname, 'dist'),
//访问路径
publicPath:'/dist/',
//访问文件的路径,这里的根路径是根据url来的，比如访问http://localhost:8088/dist/，那么就是对应/dist/
},
//将外部变量或者模块加载进来
externals : {
'jquery' : 'window.jQuery'
},
module: {
rules: [
{
test: /\.css$/,
use: [
// replace ExtractTextPlugin.extract({..})
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
},
{
test: /\.string$/,
use: [
'html-loader'
]
}
]
},
//4.0后公共模块的提取,现在有点bug,不能动态刷js,估计是参数配错了
// optimization: {
// splitChunks: {
// cacheGroups: {
// // 注意: priority属性
// // 其次: 打包业务中公共代码
// common: {
// name: "common",
// //暂时只提取.js的,如果不加匹配会将css提取到公共
// test: /\.js$/,
// chunks: "all",
// minSize: 1,
// priority: 0
// },
// // 首先: 打包node_modules中的文件
// vendor: {
// name: "vendor",
// test: /[\\/]node_modules[\\/]/,
// chunks: "all",
// priority: 10
// }
// }
// }
// }
};
module.exports = config;
if ('dev' == WEBPACK_ENV) {
// config.entry.common.push('webpack-dev-server/client?http://localhost:8088')
}
本地用webpack打包,然后发布到远程,为了完成自动发布,代码转移媒介是github.
2.配置环境
前端代码需要node环境,nginx,我啥都没有,重新自己来弄
安装node
安装node:linux用wget 找一个稳定的版本,我这里找的是
先进入用户主目录,下载过来 cd ~
wget https://npm.taobao.org/mirrors/node/v8.9.3/node-v8.9.3-linux-x64.tar.xz
我这里下的xz,xz用tar -xvf,解压完会看到一个文件夹,解压出来的文件夹即是可运行目录,在bin中执行./node -v可以看到当前的版本(一开始我下的是最新版的),我们一般把解压的环境放到/usr/local下,这里移动到目标文件夹/usr/local/node-v8.9.3-linux-x64
(没权限什么的自己用root用户或者自己把权限改一下,我这小水管服务器就不说了)
配置环境变量vi /etc/profile中配置:
注意中间用
:分隔各个变量,不是
;
配置完成后
source /etc/profile执行
node -v,可以看到执行成功
安装ruby
sudo yum install ruby
安装webpack和webpack-cli
npm install -g webpack --registry=https://registry.npm.taobao.org
npm install -g webpack-cli --registry=https://registry.npm.taobao.org
顺便安装sass
npm install -g sass
3.项目发布
2019年01月24日17:53:38 目前先写到这,后续慢慢更新出线上脚本书写及应用发布
今天2019年01月25日16:32:32搞定应用发布,及脚本书写,这里讲下怎么搞
脚本逻辑如下,每个逻辑讲的非常非常清楚了已经
#!/bin/sh
GIT_HOME=/developer/git-repository/ipaozha/
DEST_PATH=/product/frontend/ipaozha/
#cd dir
echo "=============进入git目录========"
cd $GIT_HOME
echo "=============进入主分支========"
git checkout master
echo "=============拉去代码========"
git pull
echo "=============安装npm========"
npm install --registry=https://registry.npm.taobao.org
echo "=============执行打包========"
npm run dist
echo "=============判断打包是否成功========"
if [ -d "./dist" ];
then
echo "=============删除上个dist.bak,dist改成dist.bak========"
if [ -d $DEST_PATH"dist.bak" ];
then
rm -rf $DEST_PATH"dist.bak"
fi
mv $DEST_PATH"dist" $DEST_PATH"dist.bak"
echo "=============移动dist到product目标文件夹========"
cp -R ./dist $DEST_PATH"dist"
else
echo "=============打包失败========"
exit
fi
这里需要nginx提供访问dist文件夹权限,这里讲下安装nginx及配置文件配置:
nginx安装
nginx安装连接
详细教程在上面那个链接,为了防止链接挂掉,这里稍微讲下:
- 安装依赖
yum install gccyum install pcre-develyum install zlib zlib-develyum install openssl openssl-devel
- 下载nginx的tar包
//创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx
//下载tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.g
- 安装nginx
//进入nginx目录
cd /usr/local/nginx
//执行命令
./configure
//执行make命令
make
//执行make install命令
make install
这里展示一下目前配置的nginx server服务
1.在默认的nginx.conf文件中插入自定义的conf
在conf中server开始配置的前一行加入
相当于import功能,然后再conf文件夹中创建vhost文件夹,在里面创建你的服务的conf,然后编辑
这块目前我只对css,js做了处理,其实应该加上图片等资源,等后面我写了一点点的时候再配吧,简单的很.
如有疑惑,加Q:270081841交流