webpack3.10配置react

時間  2019-12-06
標籤 webpack3.10 webpack 配置 react 欄目 React 简体版
原文   原文鏈接

在項目文件的目錄下新建文件webpack.config.jscss

const path = require('path');

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

修改webpac.config.js出口，入口html

const path = require('path');

module.exports = {
    entry: './src/app.js',//入口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
};

 

1.安裝webpackjava

安裝命令：node

yarn add webpack@3.10.0 --devreact

 

執行命令webpack

node_modules/.bin/webpackweb

在dist目錄下就能看到打包好的app.jsjson

最基本的webpack打包就弄好了sass

 

2.安裝html插件html-webpack-pluginbash

 

安裝命令：

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

 

第一步：在webpack.config.js文件下配置html-webpack-plugin

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'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html' //template是生成html文件按本身定義的模板，路徑定義爲./src/index.html
        })
    ]
};

第二步：在./src目錄下新建index.html，能夠本身定義title,mate

第三步：執行命令：

node_modules/.bin/webpack

在dist打包目錄能看到生成的index.html文件

 

能夠看到咱們生成的app.js也引入了

 

 

3.安裝javasrcipt插件babel

 

安裝命令：

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

 

安裝完命令能夠在package.json,多了幾個屬性

"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.1",
 

第一步：webpack.config,js配置babel插件

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: /\.m?js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};
 
第二步：配置完在app.js寫一些ES6語法
第三步：終端輸入命令node_modules/.bin/webpack打包，看是否轉換成功
成功是會轉換成es5的
 
4.安裝react插件babel-preset-react
 
安裝命令

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

 

第一步：webpack.config.js配置

module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env','react']
                    }
                }
            }
        ]
    },

 

5.在項目中添加react.js

安裝命令

yarn add react@16.2.0 react-dom@16.2.0

第一步：在src目錄下的app.js添加react語法試一下

import React from 'react'
import ReactDOM from 'react-dom'
 
ReactDOM.render(
    <h1>hello, world</h1>,
    document.getElementById('app')
)

第二步：把app.js後綴改爲app.jsx

第三步：webpack.config.js修改entry的入口文件後綴修改爲jsx

entry: './src/app.jsx'

第四步：編譯的後綴名js改爲jsx

module: {
        rules: [
　　　　　　　//　js文件處理
            {
                test: /\.m?jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env','react']
                    }
                }
            }
        ]
    },

 

第五步：執行打包命令node_modules/.bin/webpack看看效果

打開打包好的dist/index.html能夠看到hello world說明剛纔在app.jsx用react語法寫的「hello world」編譯成功了

 

6.安裝css插件css-loader

安裝命令

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

 

 

第一步：配置webpack.config.js,在rules添加一個處理css的對象

module: {
        rules: [
            {
                test: /\.m?jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env','react']
                    }
                }
            },
　　　　　　　　// css文件處理
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ]
    },

第二步：新建一個文件app.css，在裏面寫一些樣式

第三步：而後在app.jsx引入樣式

import './app.css'

打包以後打開dist/index.html看看樣式有沒有發生改變

7.安裝extract-text-webpack-plugin插件

它將*.css條目塊中的全部必需模塊移動到單獨的CSS文件中。所以，您的樣式再也不內聯到JS包中，而是在單獨的CSS文件中（styles.css)

第一步：安裝插件

安裝命令：

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

 

第二步：配置webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-pluginmodule.exports = {    entry: './src/app.jsx',// output: { path: path.resolve(__dirname, 'dist'),
 filename: 'app.js' }, module: { rules: [ { test: /\.m?jsx$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env','react'] } } }, { test: /\.css$/i, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }),
　
　　　　new ExtractTextPlugin("index.css"),
] };
 
 
 
 
 
 
 
 
 
 
8.安裝sass-loader插件
 
 
第一步：安裝
 
 
安裝命令：
 
 
yarn add sass-loader@6.0.6 --dev
 
 
第二步：配置webpack.config.js
 
 
 
  
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"
                })
            },
            // sass文件的處理
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new ExtractTextPlugin("css/[name].css"),
    ]
};
 
 
 
 
 
 
 
第三步：新建一個index.scss文件
 
 
寫一些scss的語法
 
 
第四步：在app.jsx引入
 
 
 
  
import React from 'react';
import ReactDOM from 'react-dom';

import './app.css'
import './index.scss' //引入scss文件
ReactDOM.render(
    <h1>hello, world</h1>,
    document.getElementById('app')
)
 
 
 
 
第四步：用打包命令執行打包
 
 
若是出現：Cannot find module 'node-sass'
 
 
安裝一下node-sass
 
 
yarn add node-sass --seve-dev
 
 
而後繼續打包
 
 
查看index.html樣式的改變
 
 
 
 
 
9.安裝url-loader，對圖片對處理
 
 
第一步：安裝
 
 
安裝命令
 

 
 

 
 
yarn add file-loader@1.1.6 url-loader@0.6.2 --dev
 
 
 
 
 
第二步：配置webpack.confog.js
 
 
 
  
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"
                })
            },
            {
                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,
                        },
                    },
                ],
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new ExtractTextPlugin("css/[name].css"),
    ]
};
 
 
 
 
第三步：放一張圖片，而後引入
 
 
第四步：打包命令打包，看到dist文件多了一張重命名後的img
 
 
 
 
 
10.安裝font-awesome
 
 
第一步：安裝
 
 
安裝命令
 

 
 

 
 
yarn add font-awesome
 
 
 
 
 
因爲是咱們業務用對代碼因此不用加--dev
 
 
 
 
 
第二步：在app.jsx引入font-awesome
 
 
 
  
import React from 'react';
import ReactDOM from 'react-dom';

import 'font-awesome/css/font-awesome.min.css'

import './app.css'
import './index.scss'
ReactDOM.render(
    <i className="fa fa-address-book"></i>,
    <h1>hello, world</h1>,
    document.getElementById('app')
)
 
 
 
 
 
 
 
第三步：配置webpack.config.js
 
 
 
  
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"
                })
            },
            {
                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,
                        },
                    },
                ],
            },
            // 字體圖標的配置
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            publicPath:'/fonts/',//打包到fonts文件夾
                            useRelativePath:true,//設置爲相對路徑
                            name:'[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new ExtractTextPlugin("css/[name].css"),
    ]
};
 
 
 
 
第四步：執行打包命令能夠看到生成幾個字體文件
 
 
 
 
 
 
 
 
11.提出公共模塊
 
 
配置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'),
        filename: 'js/app.js'
    },
    module: {
        rules: [
            {
                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]'
                        },
                    },
                ],
            },
            // 字體圖標的配置
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: 'resource/[name].[ext]'
                            // publicPath:'/fonts/',//打包到fonts文件夾
                            // useRelativePath:true,//設置爲相對路徑
                            // name:'[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        //處理html文件
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // 獨立css文件
        new ExtractTextPlugin("css/[name].css"),
        //提出公共模塊
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',
            filename: 'js/base.js'
        })
    ]
};
 
 
 
 
 
 
 
 
 
 
12.安裝webpack-dev-serve
 
 
第一步：安裝命令
 

 
 

 
 
 
  
 yarn add webpack-dev-server@2.9.7 --dev
 
  
 
 
  
第二步：配置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: 'js/app.js'
    },
    module: {
        rules: [
            {
                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]'
                        },
                    },
                ],
            },
            // 字體圖標的配置
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: 'resource/[name].[ext]'
                            // publicPath:'/fonts/',//打包到fonts文件夾
                            // useRelativePath:true,//設置爲相對路徑
                            // name:'[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        //處理html文件
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // 獨立css文件
        new ExtractTextPlugin("css/[name].css"),
        //提出公共模塊
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',
            filename: 'js/base.js'
        })
    ],
    devServer: {
        // contentBase: './dist'
　　　　　　//修改端口號
 
   

     　　　　　　port: 8086 
   
 
   


    },
};
 
  
 
  
執行命令
 
 
 

 
 

 
 
node_modules/.bin/webpack-dev-server
 
 
 
 
 
 
 
 
 
 
 
13.修改經常使用的打包命令
 
 
 
 
 
在package.json添加字段
 
 
 
  
"scripts": {
    "dev": "node_modules/.bin/webpack-dev-server",
    "dist": "node_modules/.bin/webpack -p"
  }
 
 
   



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程