个人项目构建笔记

1、在githup上“Create a new repository”
2、git clone 将项目下下来
3、在当前目录 npm init （初始化项目）
4、touch .gitignore 创建忽略文件
5、cnpm install --save-dev webpack webpack-cli
6、配置出入口文件，添加模块加载器css、js
7、配置实现代码修改自动编译并刷新浏览器

前端文件修改后热加载并浏览器自动刷新

第一、在webpack.config添加插件(plugins)：

plugins:[
	new webpack.optimize.OccurrenceOrderPlugin(),//根据模块调用次数给模块分配id,降低文件大小
	new webpack.HotModuleReplacementPlugin(),//1、HMR热替换模块
	new webpack.NoEmitOnErrorsPlugin()//报错不退出webpack进程
]

第二、在webpack.config添加模块(module)和devtool：

devtool:'eval-source-map'
module:{
	rules:[{
		test:/\.css$/,
		use:['style-loader','css-loader?sourceMap']
	}]
}

第三、在app.js(用来启动服务的文件)里面调用webpack并配置中间件

const webpackDev=require('webpack-dev-middleware');
const webpack=require('webpack');
const webpackConfig=require('./webpack.config.js');
const compiler=webpack(webpackConfig);
app.use(webpackDev(compiler,{
	noInfo:true,
	publicPath:webpackConfig.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));//配置中间件

第四、修改入口文件

原：

entry:{
		'common/main':srcPath+'/common/main.js'
	},

改成：

entry:{
		'common/main':[srcPath+'/common/main.js','webpack-hot-middleware/client?reload=true']//4
	},

实现浏览器自动刷新。注：只有跟入口文件关联的文件被修改了才会刷新。

第五、在入口文件js添加如下代码可实现css修改后进行ajax刷新

if(module.hot){
	module.hot.accept();
}

修改js文件后浏览器会进行ajax刷新，而修改css后浏览器会重新加载，所有要加这么一句判断，以实现修改css也能ajax刷新。

后端代码修改后服务器自动重启

第一、全局安装supervisor

npm  isntall  supervisor -g 

第二、修改package.json文件，并添加配置

"scripts": {
    "dev": "supervisor -w server/,app.js -i server/views app"
  }

-w：监听文件或目录，有多个用头号隔开；
-i：忽略某个目录，有多个用头号隔开

后端服务重启后浏览器自动刷新

第一、修改app.js文件

原：

const express=require('express');
const app=express();
app.listen(8080,()=>{
	console.log('web服务启动成功');
  });

改成：

const reload =require('reload');
const http=require('http');
const server= http.createServer(app);
reload(app);
server.listen(8080,()=>{
	console.log('web服务启动成功');
  });

第二、在html里面引入一段js

<!-- 服务器重启刷新浏览器 -->
<script src="/reload/reload.js"></script>

修改页面自动刷新

第一、创建代理服务器（修改app.js）

在服务启动成功后创建，先添加插件

const browserSync=require('browser-sync').create();

原：

server.listen(3000,()=>{
console.log('服务启动成功')
}）

改后：

server.listen(3000,()=>{
        browserSync.init({
            ui:false,
            open:false,
            online:false,
            notify:false,
            proxy: 'http://localhost:3000',
            files: './server/views/**',
            port: 3000
        }, () => {
          console.log('代理服务器启动成功')
        });
  });

注：监听端口号需要一样否则会报403的错误

第二、修改webpack.config.js文件

原：

publicPath:'http://localhost:8080/public' 

改成：

publicPath:'http://localhost:3000/public'

配置环境变量

用于区分开发的工作流和生产时的工作流

思路：
在app.js（服务器文件）中判断环境变量是开发的还是生产的；
新建一个webpack.production.config.js（实现项目webpack项目打包） 用来配置生产时的工作流
配置
修改package.json（命令中添加set NODE_ENV=1）

"dev4": "set NODE_ENV=1& supervisor -w server/,app.js,webpack.config.js -i server/views app",

在app.js中获取设置的变量进行判断

//取环境变量 其中process是node全局变量
const isDev=process.env.NODE_ENV==1;

NODE_ENV设置值可以是字符，但是目前我在app.js获取得到做比较总是false，所以才使用数字代替。
判断如果是开发模式，启动开发模式配置，否者启动生产模式

配置wepack生产模式

在原有的基础上，删除之前配置的开发模式插件，添加clean-webpack-plugin插件和extract-text-webpack-plugin，第一个是用来清除文件的插件，每次编译都会执行；第二个是用来将入口文件关联的css文件单独提起出来

clean-webpack-plugin配置

安装：npm install --save-dev clean-webpack-plugin
配置：

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins:[
new CleanWebpackPlugin(['public'])
.....

extract-text-webpack-plugin配置

安装：npm install -- save-dev extract-text-webpack-plugin@next
配置：
模块修改

module:{
 rules:[
       {
         test:/\.css$/,
         use:ExtractTextPlugin.extract({
				fallback: "style-loader",
				use: "css-loader"
				})
		},{
           	test:/\.(png|svg|jpg|gif)$/,
           	//图片建会保存到public/img 目录下
           	use:['url-loader?limit=8192&context=client&name=/img/[name].[ext]']
           }
.....

插件修改：

plugins:[
 //用来独立css文件和路径的
 new ExtractTextPlugin({
        filename: function (getPath) {
            return getPath('css/[name].css').replace('css/common', 'css');
        },
        allChunks: true
 })
 ....

添加混淆压缩插件

plugins:[
  new webpack.optimize.UglifyJsPlugin()；
  ....

把jquery的全局变量提取出来的插件

不单独提起出来会报错

plugins:[
  new webpack.ProvidePlugin({
			$:'jquery',
			jQuery:'jquery'
  })
  ....

优化环境变量，兼容多平台

Max、window、Linux都会存在平台的差异，cross-env可解决此问题。

安裝：npm install --save-dev cross-env
修改package文件：
原：

"scripts": {
  "dev4": "set NODE_ENV=1 & supervisor -w server/,app.js,webpack.config.js -i server/views app"
.....

改成：

"scripts": {
  "dev4": "cross-env NODE_ENV=1 & supervisor -w server/,app.js,webpack.config.js -i server/views app"
 ....

补全package配置

字体配置

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
       'file-loader?limit=8192&name=/fonts/[name].[ext]'
      ]
 }