从零搭建个人博客(1)-webpack环境配置

本文作为搭建个人博客的开端，将会配置环境，以后做别的project也可以以此开始。代码托管在github。
code: https://github.com/MSChuan/Blog-UI,
demo: https://mschuan.github.io/Blog-UI/dist_prod/index.html

和todolist类似，使用框架webpack+react+redux，由于要实现UI，选择使用react-bootstrap，响应式布局，方便实用，前端路由则用react-router，算是react的经典搭配。

npm init
npm install react react-dom redux react-redux redux-thunk css-loader style-loader sass-loader node-sass file-loader url-loader autoprefixer postcss-loader --save
npm install webpack -g
npm install webpack --save-dev
npm install extract-text-webpack-plugin html-webpack-plugin --save-dev
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2 babel-plugin-transform-decorators-legacy babel-plugin-import babel-cli --save-dev
npm install path webpack-dev-server redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor react-hot-loader@next --save-dev
npm install bootstrap react-bootstrap react-router react-router-dom --save

分析一下webpack的配置，为了分开开发和发布环境的配置，这里使用了两个配置文件，分别是webpack.config.js和webpack.config.prod.js，在package.json中封装一下运行的命令。

"scripts": {"start": "node server","build": "webpack --config ./webpack.config.prod.js --progress --profile --colors"}

这样运行npm start即可启动本地测试服务器，运行npm run build即可使用webpack.config.prod.js打包production版本的代码，运行webpack即可打包成debug版本。

在config的开头设置entry，指定打包的入口文件以及一些热加载需要用到的路径，vendor是单独打包指定的依赖。

entry: {index: ['webpack-dev-server/client?http://localhost:3000','webpack/hot/only-dev-server','react-hot-loader/patch',path.join(__dirname, 'src/index.js')],vendor: [  // pack react and react-dom independently"react","react-dom","react-bootstrap"]},

之后是输出文件路径：

output: {path: path.join(__dirname, 'dist/'),filename: "js/[name].js",publicPath: './'},

path是打包文件的输出路径，__dirname是当前配置文件的路径，所以这里指定了在dist目录下输出打包文件，filename是打包的入口js文件路径，它是相对于path的相对路径，这样设置的输出为__dirname/dist/js/index.js，publicPath非常重要，它与path没什么关系，如果是相对路径，就是相对于index.html所在目录，也可以直接是静态资源缓存url，比如cdn的url。它的作用是指定代码中引用的根目录，比如css中image的url。后文会讲到我们需要设置背景图片的颜色，css代码中是这样的：

background: url('../resource/image/topimage.jpg') no-repeat;

publicPath设置为’./’，所以打包后的代码中：

background: url(./resource/image/topimage.jpg) no-repeat;

这里出现比较神奇的一幕，打包前的’../’被忽略了，相当于publicPath + ‘resource/image/topimage.jpg’，所以打包后的css文件需要和index.html在同一目录下才能有效。

loaders里就是加载对应资源文件的配置。

module: {loaders: [{    // babel loadertest: /\.js?$/,exclude: /node_modules/,loader: "babel-loader"}, {test: /\.(scss|sass|css)$/,  // pack sass and css filesloader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader!sass-loader"})}, {test: /\.(png|jpg|jpng)$/, // pack imagesloader: 'url-loader?limit=8192&name=resource/image/[name].[ext]'},{ test: /\.(woff|woff2|eot|ttf|svg)(\?[a-z0-9]+)?$/,loader: 'url-loader?limit=1000&name=resource/fonts/[name].[ext]' }]},

对于开发环境，使用如下plugins：

plugins: [new HtmlWebpackPlugin({template: 'src/index.tpl.html',inject: 'body',filename: 'index.html'}),new webpack.optimize.CommonsChunkPlugin("bundle/vendor.bundle.js"), //packed independently such as react and react-domnew ExtractTextPlugin("index.css"), // pack all the sass and css files into index.csssnew webpack.HotModuleReplacementPlugin(),new webpack.NoEmitOnErrorsPlugin(),new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('development')})]

对于发布版本的打包则有些不同：

plugins: [new HtmlWebpackPlugin({template: 'src/index.tpl.html',inject: 'body',filename: 'index.html'}),new webpack.optimize.CommonsChunkPlugin("bundle/vendor.bundle.js"), //packed independently such as react and react-domnew ExtractTextPlugin("[name]-[hash].min.css"), // pack all the sass and css files into css filenew webpack.optimize.UglifyJsPlugin({ // handles uglifying jscompressor: {warnings: false,screw_ie8: true}}),new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')}),new webpack.LoaderOptionsPlugin({options: {postcss: function () {return [require('autoprefixer')];}}})]

增加了代码优化，css自动加前缀实现跨浏览器呈现。UI的搭建将在下一篇文章中介绍。

从零搭建个人博客(1)-webpack环境配置相关推荐

从零搭建个人博客(3)-如何在webpack环境下配置jquery和富文本编辑器Simditor
无论是博主自己写文章还是读者发表评论,都需要一个方便的编辑框,html自带的textarea和editable div都过于简单,本文将记录在webpack环境中添加jquery和Simditor的过 ...
从零搭建个人博客(2)-博客UI搭建
code: https://github.com/MSChuan/Blog-UI, demo: https://mschuan.github.io/Blog-UI/dist_prod/index.ht ...
10 分钟从零搭建个人博客
2000年,博客刚进入中国,却并不被看好,用户寥寥无几. 直到2005年,随着新浪.搜狐等门户网站的布局,博客逐渐在国内兴起. 但几年后,因微博.公众号等媒介的发展,博客的生存空间受到挤压,开始走向没 ...
windows从零搭建hugo博客
写在前面的话作为一个计算机专业的学生,平时没有好好学习,可又没想过转专业,听说程序员和博客很配,我早就想过搭建一个个人博客了,可是直到大四我才真正动起手来.我是按照在bi站上的一个大神CodeShe ...
从零搭建个人博客网站（域名备案 + https免费证书）
为什么选择搭建个人博客?一方面是各个平台经常下架原创文章,另一个方面是为了熟悉整个建站流程. 通过搭建个人博客,我们可以自由的发表文章不用担心下架,而且可以锻炼个人的SEO优化能力,不管是运维还是运营 ...
从零搭建Hexo博客并部署阿里云服务器（奶妈级教学）
前言前天刚买了个云主机,就开始学着搭博客了,参考了挺多大手的博客,最终还是选择使用Hexo来作为自己的博客框架.测试结束了,今天也将自己搭博客过程中踩过的坑做一个输出,希望对有想法要做自己的博客的同 ...
手把手教你云服务器如何搭建typecho博客网站（包括配置免费SSL证书）
Typecho是一款轻量级开源博客程序.基于PHP5开发,支持多种数据库,优点是内核强健.扩展方便.体验友好.运行流畅. 轻量应用服务器可以用来构建网站.小程序/小游戏.电商.云盘/图床以及各类开发测 ...
app python搭建_Django搭建个人博客：创建并配置APP功能模块
创建APP 在Django中的一个app代表一个功能模块.开发者可以将不同功能的模块放在不同的app中, 方便代码的复用.app就是项目的基石,因此开发博客的第一步就是创建新的app,用来实现跟文章相 ...
从零搭建技术博客，开篇。
这两天,刚好周末,有时间 . 把 www.istester.com 站进行了大改版 . 目前整个站点已改版完成,就差内容的布局和细节的CSS样式调整 . 后续,会通过文章,碎片化的记录,整个过程和遇到 ...

从零搭建个人博客(1)-webpack环境配置

从零搭建个人博客(1)-webpack环境配置相关推荐

最新文章

热门文章