使用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 [email protected] --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 [email protected] --dev

2. 官方使用說明

6.使用babel-loader轉義js腳本

1. 安裝

   yarn add [email protected] [email protected] [email protected] --dev	

2. 使用說明

7.使用babel-preset-react

1. 安裝

   yarn add [email protected] --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 [email protected] [email protected]

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 [email protected] [email protected] --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  [email protected] --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 [email protected] --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 [email protected] [email protected] --dev
2.添加配置

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

14. 使用webpack-dev-server當web服務訪問

1. 安裝

yarn add [email protected] --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:{}
};