使用node、yarn、webpack、reactjs等技术栈搭建前端项目

0.安装node和yarn

去node官网下载安装包安装node,
然后用node自带npm安装yarn

sudo npm install yarn -g

1.使用yarn初始化项目

进入项目目录

yarn init

2. 使用yarn安装webpack

yarn add webpack@3.10.0 --dev

3.在项目中添加webpack.config.js配置文件,并配置入口entry和出口output

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

4.编写js文件，通过命令打包

./src/app.js文件内容

console.log("123");

运行命令打包js文件输出到dist目录中

node_modules/.bin/webpack

5.使用插件HtmlWebpackPlugin打包html文件

1. 安装HtmlWebpackPlugin

    yarn add html-webpack-plugin@2.30.1 --dev

2. 官方使用说明

6.使用babel-loader转义js脚本

1. 安装

   yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev	

2. 使用说明

7.使用babel-preset-react

1. 安装

   yarn add babel-preset-react@6.24.1 --dev 

2. webpack.config.js中添加react配置

   		const path = require('path');
   		const HtmlWebpackPlugin = require('html-webpack-plugin');
   		
   		module.exports = {
   		  entry: './src/app.js',
   		  output: {
   		    path: path.resolve(__dirname, 'dist'),
   		    filename: 'app.js'
   		  },
   		  module: {
   			  rules: [
   			    {
   			      test: /\.js$/,
   			      exclude: /(node_modules)/,
   			      use: {
   			        loader: 'babel-loader',
   			        options: {
   			          presets: ['env','react']
   			        }
   			      }
   			    }
   			  ]
   		   },
   		  plugins: [new HtmlWebpackPlugin({
   		  	title:'测试'
   		  })]
   		};
   

8.在当前项目中添加react

yarn add react@16.2.0 react-dom@16.2.0

9. 更改webpack.config.js配置，将对js的打包改成对jsx的打包

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
	  rules: [
	    {
	      test: /\.jsx$/,
	      exclude: /(node_modules)/,
	      use: {
	        loader: 'babel-loader',
	        options: {
	          presets: ['env','react']
	        }
	      }
	    }
	  ]
   },
  plugins: [new HtmlWebpackPlugin({
  	title:'测试',
  	template:'./src/index.html'
  })]
};

10.使用css-loader打包样式文件

1. 安装

yarn add style-loader@0.19.1 css-loader@0.28.8 --dev

2. 添加配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 entry: './src/app.jsx',
 output: {
   path: path.resolve(__dirname, 'dist'),
   filename: 'app.js'
 },
 module: {
     rules: [
       {
         test: /\.jsx$/,
         exclude: /(node_modules)/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['env','react']
           }
         }
       },
       {
       	test:/\.css$/,
       	use:[
       		'style-loader',
       		'css-loader'
       	]
       }
     ]
  },
 plugins: [new HtmlWebpackPlugin({
 	title:'测试',
 	template:'./src/index.html'
 })]
};

11.使用插件extract-text-webpack-plugin分离打包文件目录

1. 安装

 yarn add  extract-text-webpack-plugin@3.0.2 --dev

2. 修改配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
 entry: './src/app.jsx',
 output: {
   path: path.resolve(__dirname, 'dist'),
   filename: 'app.js'
 },
 module: {
     rules: [
       {
         test: /\.jsx$/,
         exclude: /(node_modules)/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['env','react']
           }
         }
       },
       {
       	test:/\.css$/,
       	use: ExtractTextPlugin.extract({
             fallback: "style-loader",
             use: "css-loader"
           })
       }
     ]
  },
 plugins: [
 	  new HtmlWebpackPlugin({
     	title:'测试',
     	template:'./src/index.html'
     }),
     new ExtractTextPlugin('index.css')
 	]
};

12.sass-loader的使用

1. 先安装node-sass

yarn add node-sass --dev

2. 再安装sass-loader

yarn add sass-loader@6.0.6 --dev

3. 添加配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
 entry: './src/app.jsx',
 output: {
   path: path.resolve(__dirname, 'dist'),
   filename: 'app.js'
 },
 module: {
     rules: [
      //react语法（jsx文件）的处理
       {
         test: /\.jsx$/,
         exclude: /(node_modules)/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['env','react']
           }
         }
       },
       //css文件的处理
       {
       	test:/\.css$/,
       	use: ExtractTextPlugin.extract({
             fallback: "style-loader",
             use: "css-loader"
           })
       },
       //sass文件的处理
       {
       	test:/\.scss$/,
       	use: ExtractTextPlugin.extract({
             fallback: "style-loader",
             use: ["css-loader","sass-loader"]
           })
       }
     ]
  },
 plugins: [
 	  new HtmlWebpackPlugin({
     	title:'测试',
     	template:'./src/index.html'
     }),
     new ExtractTextPlugin('index.css')
 	]
};

13. file-loader和url-loader的处理图片资源文件

1.安装
yarn add file-loader@1.1.6 url-loader@0.6.2 --dev
2.添加配置

//图片文件的处理
       {
           test: /\.(png|jpg|gif)$/i,
           use: [
             {
               loader: 'url-loader',
               options: {
                 limit: 8192
               }
             }
           ]
       }

14. 使用webpack-dev-server当web服务访问

1. 安装

yarn add webpack-dev-server@2.9.7 --dev

2.使用命令开启服务

node_modules/.bin/webpack-dev-server

15.配置publicPath进行分类打包到资源文件夹

• 配置webpack.config.js文件

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
 entry: './src/app.jsx',
 output: {
   path: path.resolve(__dirname, 'dist'),
   publicPath:'/dist/',
   filename: 'app.js'
 },
 module: {
     rules: [
      //react语法（jsx文件）的处理
       {
         test: /\.jsx$/,
         exclude: /(node_modules)/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['env','react']
           }
         }
       },
       //css文件的处理
       {
       	test:/\.css$/,
       	use: ExtractTextPlugin.extract({
             fallback: "style-loader",
             use: "css-loader"
           })
       },
       //sass文件的处理
       {
       	test:/\.scss$/,
       	use: ExtractTextPlugin.extract({
             fallback: "style-loader",
             use: ["css-loader","sass-loader"]
           })
       },
       //图片文件的处理
       {
           test: /\.(png|jpg|gif)$/i,
           use: [
             {
               loader: 'url-loader',
               options: {
                 limit: 8192,
                 name : 'resource/[name].[ext]'
               }
             }
           ]
       }
     ]
  },
 plugins: [
 	   //处理html文件
 	  new HtmlWebpackPlugin({
     	title:'测试',
     	template:'./src/index.html'
     }),
     //独立css文件
     new ExtractTextPlugin('css/[name].css'),
     //公共模块
     new webpack.optimize.CommonsChunkPlugin({
     	name : 'common',
     	filename : 'js/app.js'
     })
 	],
 	devServer:{}
};