webpack構建react項目的設定檔

標籤：display   .config   span   代碼   依賴   img   otf   hid   one   

webpack是一個模組打包工具，處理模組之間的依賴同時產生對應模組的靜態資源。

• webpack把項目中所有的靜態檔案都看作一個模組
• 模快之間存在著一些列的依賴
• 多頁面的靜態資源產生(打包之後產生多個靜態檔案，涉及到代碼拆分)

webpack.config.js檔案

//__dirname是node.js中的一個全域變數，它指向當前執行指令碼所在的目錄//webpack.config.jsconst HtmlWebpackPlugin = require(‘html-webpack-plugin‘);const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);module.exports = {    devtool: ‘eval-source-map‘,//產生Source Maps,這裡選擇eval-source-map    entry:  __dirname + ‘/app/main.js‘,//唯一入口檔案,__dirname是node.js中的一個全域變數，它指向當前執行指令碼所在的目錄    output: {//輸出目錄        path: __dirname + ‘/build‘,//打包後的js檔案存放的地方        filename: ‘js/[name].js‘//打包後輸出的js的檔案名稱    },    module: {        //loaders載入器        rules: [        {                test: /\.(js|jsx)$/,//一個匹配loaders所處理的檔案的拓展名的Regex，這裡用來匹配js和jsx檔案（必須）                exclude: /node_modules/,//屏蔽不需要處理的檔案（檔案夾）（可選）                use: ‘babel-loader‘//babel-loader的名稱（必須）            },            {                test:/\.css$/,                use:[                ‘style-loader‘,                ‘css-loader‘                ]            },{                test:/\.(png|svg|jpg|gif)$/,                use:[                ‘file-loader‘                ]            },            {                test:/\.(woff|woff2|eot|ttf|otf)$/,                use:[                ‘file-loader‘                ]            }            ]        },        plugins: [        new CleanWebpackPlugin([‘/build‘]),        new HtmlWebpackPlugin({            title:"自動產生自訂標題",//如果使用了模板，就使用模板裡的title，這裡的title設定會失效，哪怕模板裡的title為空白            template:‘index.html‘,//需要編譯的模板,可以是jade等第三方模板引擎也可以說純html頁面            // filename:‘demo.html‘,//最終產生的檔案名稱,預設是index.html            hash:true,//是否給所有包含的js、css檔案後面添加hash值,可以用來清除緩衝，但好像不是很管用            inject:true,// | ‘head‘ | ‘body‘ | false  ,注入所有的資源到特定的 template 或者 templateContent 中，如果設定為 true 或者 body，所有的 javascript 資源將被放置到 body 元素的底部，‘head‘ 將放置到 head 元素中。            //chunks:[‘index‘] //指定產生的檔案demo.hmtl需要包括entry裡的哪些入口檔案(這裡是index,main.js不會引入),不設定的話所以入口js檔案都會被引入進來        })],    //webpack-dev-server配置    devServer: {        contentBase: ‘./build‘,//預設webpack-dev-server會為根資料夾提供本機伺服器，如果想為另外一個目錄下的檔案提供本機伺服器，應該在這裡設定其所在目錄（本例設定到"build"目錄）        historyApiFallback: true,//在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html        inline: true,//設定為true，當源檔案改變時會自動重新整理頁面        port: 8001,//設定預設監聽連接埠，如果省略，預設為"8080"    }};

View Code

 

解析jsx檔案需要  建立 .babelrc 檔案

cmd進入根目錄，輸入   type null>.babelrc  ，斷行符號即可

//.babelrc{"presets": ["react","es2015"]}

　　

 

webpack構建react項目的設定檔