webpack入門+react環境配置

時間 2019-11-11

原文原文鏈接

小結放在前：這篇文章主要是爲下一篇的react提早鋪好路，webpack是一個前端資源模塊化管理和打包工具，說白了就是方便咱們管理本身的經常使用的一些代碼，好比你開發中用到sass以及jade同時用到es6，開發時你不可能改動某個地方就挨個命令去轉換在到瀏覽器去看效果，那樣效率是很是低的。因此webpack幫咱們省去了那些多餘的步驟css

webpack 基本安裝

開始前仍是萬萬不能缺乏的安裝：html

npm install webpack -g

安裝完接着是建個文件夾新建一個package.json依賴管理文件前端

npm init  //運行後  按提示填寫   固然嫌麻煩 就直接下一步  下一步就好  無傷大礙

如今安裝咱們的webpacknode

npm install webpack --save-dev   
//--save-dev 的意思是將這個安裝過程記錄到咱們的package.json依賴管理文件裏

完後新建一個文件並命名爲webpack.config.js（如同咱們的常規的 gulpfile.js、Gruntfile.js），就是一個配置項，告訴 webpack 它須要作什麼。react

打開webpack.config.js引入webpackwebpack

var webpack = require('webpack');

webpack 基本入門

webpack主要結構分三個：入口文件配置（entry）、入口文件輸出配置（output）、加載器配置（module）、其餘配置（resolve）es6

入口文件配置

entry: {
        index : './src/main.js'
    },

入口文件輸出配置

//配置編譯成功後文件存放的位置
output: {
        path: 'dist/js',  //編譯後文件所在的文件夾
        filename: '[name].js'  //根據入口文件名命名編譯後的文件名，編譯後文件仍是叫main.js
    },

加載器配置

module: {
        //最關鍵的一塊配置，它告知 webpack 每一種文件都須要使用什麼加載器來處理
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },

其餘配置

resolve: {

        //自動擴展文件後綴名，意味着咱們require模塊能夠省略不寫後綴名
        extensions: ['', '.js', '.json', '.scss']
        
    }

ok！好記憶不如爛筆頭，如今咱們來本身搭建一個react的開發環境吧！

先參考個人目錄結構web

build存放編譯後的文件，development存放react代碼的文件夾，components存放react組件的文件夾，node_modules存放安裝的依賴npm

咱們先要安裝一些項目依賴：json

npm install --save-dev react react-dom

npm install --save-dev babel-core babel-loader  babel-preset-es2015 babel-preset-react

npm install --save-dev style-loader css-loader sass-loader url-loader

npm install --save-dev webpack-dev-server 
//自動刷新修改後的結果，在webpack.config.js中配置webpack-dev-server，
//在這裏須要修改下entry的路徑，給它加一個webpack/hot/dev-server，後文會提到

要是安裝失敗那就分開一個個裝，還不行就用淘寶的cnpm裝，還不行就看看你的node和npm的環境變量等配置（親身體會T_T）

npm install cnpm -g

行！接下來是文件的內容

webpack.config.js文件的配置以下：

var path = require('path');
var webpack = require('webpack');  //加載webpack依賴包
module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './development/main.js')],  
    //入口文件並添加了熱加載
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'  //輸出文件
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                } //將react編譯成js文件
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' }, 
            //打包css文件
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, 
            //編譯sass文件
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} 
            //對圖片進行打包
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    resolve: {
        //自動擴展文件後綴名
        extensions: ['', '.js', '.json', '.scss', '.ts']
    }
};

main.js內容以下：

let React = require('react');
let ReactDOM = require('react-dom');
let AppComponent = require('./components/index.js');
ReactDOM.render(<AppComponent />, document.getElementById('content'));

index.js內容以下：

var React = require('react');
var ProductBox;
ProductBox = React.createClass({
    render: function () {
        return (
            <div className="productBox">
                hello react&es2015&webpack!!!
            </div>
        );
    }
});

module.exports = ProductBox;

index.html內容以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Project</title>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
</html>