使用webpack從0搭建多入口網(wǎng)站腳手架，可復(fù)用導(dǎo)航欄/底部通欄/側(cè)邊欄倦微，根據(jù)頁(yè)面文件自動(dòng)更改配置妻味，支持ES6/Less

之前只知道webpack很強(qiáng)大，但是一直沒(méi)有深入學(xué)習(xí)過(guò)欣福，這次從頭看了一下教程责球，然后從0開始搭建了一個(gè)多入口網(wǎng)站的開發(fā)腳手架，期間遇到過(guò)很多問(wèn)題拓劝，所以有心整理一下雏逾，希望能給大家一點(diǎn)幫助。

多HTML網(wǎng)站使用webpack的必要性

假如我們接到這樣一個(gè)任務(wù)郑临，開發(fā)一個(gè)簡(jiǎn)單的官網(wǎng)栖博，比如只有十幾個(gè)html頁(yè)面。項(xiàng)目很簡(jiǎn)單厢洞，我們沒(méi)有必要使用什么大型框架仇让，但是如果只是傳統(tǒng)的寫幾個(gè)html、js和css躺翻，肯定會(huì)遇到這幾個(gè)問(wèn)題：

  • 網(wǎng)站導(dǎo)航和底部通欄是每個(gè)頁(yè)面都共有的丧叽，如何實(shí)現(xiàn)復(fù)用？如果不復(fù)用公你，那么有改動(dòng)的時(shí)候就要改n個(gè)頁(yè)面蠢正，未免太傻
  • 如何在更改后強(qiáng)制清空用戶緩存？我們不可能要求用戶手動(dòng)去清除瀏覽器緩存省店，那樣太傻
  • 我想使用ES6進(jìn)行js的開發(fā)嚣崭，如何解決瀏覽器兼容性問(wèn)題笨触？
  • 我想使用less進(jìn)行css樣式開發(fā)，如何轉(zhuǎn)換雹舀？
    可以看出芦劣，沒(méi)有自動(dòng)化打包工具的加入，這些問(wèn)題我們是很難解決的说榆，因此使用webpack勢(shì)在必行虚吟。

要實(shí)現(xiàn)的目標(biāo)

看到這里，可能有的同學(xué)就急了签财，別廢話串慰，感覺(jué)進(jìn)入正題吧，不唱蒸！我們先定目標(biāo)邦鲫！無(wú)論做什么事情，都要先定目標(biāo)神汹，而不是干到哪里算哪里庆捺，這樣是不會(huì)有大的提升的，正是在邁向目標(biāo)的路上克服各種問(wèn)題屁魏，我們才有進(jìn)步滔以，在進(jìn)行這個(gè)腳手架搭建之前，我希望它是這樣的

  • 能夠打包成多個(gè)html文件和js文件氓拼，即支持多入口
  • 文件名稱都要帶上hash值你画，解決緩存問(wèn)題
  • 能夠復(fù)用網(wǎng)站的頭部導(dǎo)航欄和底部通欄
  • 通過(guò)采用less進(jìn)行樣式的編寫
  • 能夠支持ES6開發(fā)
  • 用起來(lái)要方便，增加頁(yè)面不需要手動(dòng)去更改webpack的入口設(shè)置桃漾，希望能夠根據(jù)目錄下的文件自動(dòng)配置
  • 不希望通過(guò)js動(dòng)態(tài)插入css樣式坏匪，這樣會(huì)造成頁(yè)面閃爍，希望html中直接引入css地址呈队，就像平時(shí)開發(fā)那樣
  • 能夠?qū)崟r(shí)看到開發(fā)的效果
  • build能夠?qū)Υa進(jìn)行壓縮

好了剥槐，目標(biāo)定了唱歧，開工

目錄結(jié)構(gòu)

別急宪摧，我們先來(lái)捋一捋目錄，別著急寫代碼颅崩，一個(gè)好的目錄几于，能讓我們思路清晰，我的目錄結(jié)構(gòu)如下

+ config                    //環(huán)境變量配置文件沿后，開發(fā)模式和生產(chǎn)模式使用不同的環(huán)境變量沿彭，比如接口地址，開發(fā)環(huán)境用的接口域名是http://a.com尖滚，生產(chǎn)環(huán)境使用的是http://b.com
    - dev.env.js            //本地開發(fā)變量   
    - prod.env.js           //生產(chǎn)環(huán)境變量
+ src                       
    + css                   //自己的less組件或者第三方css庫(kù)
         + component        //自己組件的less
         + lib              //第三方的css庫(kù)喉刘，比如bootstrap
    + html                  //html代碼瞧柔，主要是一些模板，如頭部導(dǎo)航睦裳，底部通欄造锅，側(cè)邊欄
         + tpl              //模板文件
    + img                   //圖片文件
    + js                    //自己的js組件庫(kù)或者第三方j(luò)s庫(kù)
         + mod              //自己的js組件放這里
         + lib              //第三方j(luò)s庫(kù)
    + page                  //頁(yè)面文件
         + index            //這個(gè)根據(jù)自己情況設(shè)置，有的頁(yè)面相關(guān)性強(qiáng)廉邑，可以放到一個(gè)文件夾下哥蔚，比如一個(gè)user文件夾，可以放個(gè)人中心的所有頁(yè)面
             - index.html   //每個(gè)頁(yè)面都要有一個(gè)html
             - index.js     //每個(gè)頁(yè)面都要有一個(gè)js蛛蒙，名稱和html的名稱保持一致
             - index.less   //每個(gè)頁(yè)面都要有一個(gè)同名less文件
          + test
             - test.html
             - test.js
             - test.less    
             
+ webpack                   //webpack的配置文件
     - dev-server.js        //開發(fā)服務(wù)設(shè)置糙箍，可以通過(guò)localhost訪問(wèn)頁(yè)面，頁(yè)面的實(shí)時(shí)編譯
     - webpack.common.js    //開發(fā)環(huán)境和生產(chǎn)環(huán)境通用配置
     - webpack.dev.js       //開發(fā)環(huán)境特有的配置
     - webpack.prod.js      //生產(chǎn)環(huán)境特有的配置

首先是config目錄牵祟，目前我主要放一些環(huán)境變量深夯，就是開發(fā)環(huán)境和生產(chǎn)環(huán)境所不同的變量，比如接口地址课舍，我們開發(fā)的時(shí)候塌西，用本地的api接口地址，而打包的時(shí)候筝尾，要換成生產(chǎn)環(huán)境api地址捡需。

webpack目錄存放webpack的配置文件，其中開發(fā)和生產(chǎn)通用配置 放到webpack.common.js中筹淫，開發(fā)特有配置放到webpack.dev.js中站辉，生產(chǎn)特有配置放到webpack.prod.js中。

src是我們開發(fā)的主目錄损姜，其中page目錄放置我們的頁(yè)面文件饰剥，這里可能和平時(shí)有所不同，我把每個(gè)頁(yè)面用到的html摧阅、js和less文件放到了一起汰蓉，有的同學(xué)可能把所有html放到一個(gè)目錄下，js放到一個(gè)目錄下棒卷，但是這樣存在一個(gè)問(wèn)題顾孽，每次改動(dòng)頁(yè)面，都要去翻目錄比规，非常的不方便若厚，我們應(yīng)該把這種高度相關(guān)的文件放到一起，而提取的各種css組件或js組件可以和頁(yè)面分開放置蜒什。

github地址：https://github.com/501351981/webpack-multiple-page

多入口配置

webpack支持多入口测秸，即給定多個(gè)入口js文件，可以輸出多個(gè)js文件，那么html怎么辦呢霎冯？我希望開發(fā)過(guò)程是這樣的铃拇，我在html中設(shè)置標(biāo)題、SEO等信息沈撞，編寫HTML內(nèi)容代碼锚贱，webpack把相關(guān)的js文件自動(dòng)插入到html底部就行，可以的关串，這需要用到html-webpack-plugin 插件拧廊，可以通過(guò)調(diào)用html模板文件打包最終html。

安裝html-webpack-plugin

npm install --save-dev html-webpack-plugin

webpack.common.js中多入口配置

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

module.exports={

    entry:[
        index:'../src/page/index/index.js',
        test:'../src/page/test/test.js'
    ],
    
    output: {
        filename: '[name].[hash].js',   //輸出名稱后面跟哈希值晋修，解決緩存問(wèn)題
        path: path.resolve(__dirname,'../dist')
    },

    ....
    
    plugins: [
      new HtmlWebpackPlugin({
         filename: 'index.html',
         template: '../src/page/index/index.html',
         chunks: ['index'],
      })
      
      new HtmlWebpackPlugin({
         filename: 'test.html',
         template: '../src/page/test/test.html',
         chunks: ['test'],
      })
    ]
}

這樣設(shè)置存在一個(gè)問(wèn)題吧碾，每次新增一個(gè)頁(yè)面，我就要到這里添加一下墓卦，未免很麻煩倦春，我們其實(shí)可以通過(guò)讀取 src/page下的js文件，自動(dòng)加入入口配置落剪；讀取 src/page下的所有html文件睁本，自動(dòng)調(diào)用new HtmlWebpackPlugin進(jìn)行實(shí)例化。

讀取目錄下所有文件名忠怖，我們需要引入glob呢堰，先安裝

npm install --save-dev glob

改進(jìn)后的配置

const glob = require('glob')
const CleanWebpackPlugin = require('clean-webpack-plugin');

//多入口js的配置，讀取src/page下所有的js文件
function entries() {
    let jsDir = path.resolve(__dirname, '../src/page')
    let entryFiles = glob.sync(jsDir + '/**/*.js')
    let map = {};

    for (let i = 0; i < entryFiles.length; i++) {
        let filePath = entryFiles[i];
        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
        map[filename] = filePath;
    }
    return map;
}

//讀取多個(gè)html模板凡泣，進(jìn)行插件實(shí)例化
function newHtmlWebpackPlugins(){
    let jsDir = path.resolve(__dirname, '../src/page')
    let htmls = glob.sync(jsDir + '/**/*.html')
    let plugins=[]

    for (let i = 0; i < htmls.length; i++) {
        let filePath = htmls[i];
        let filename_no_extension = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
        let filename=filename_no_extension.concat('.html')
       plugins.push(new HtmlWebpackPlugin({
           filename: filename,
           template: filePath,
           chunks: [filename_no_extension],
       }))
    }

    return plugins
}


module.exports={

    entry:entries(),
    
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname,'../dist')
    },

    ....
    
    plugins: [
      ...newHtmlWebpackPlugins()
    ]
}

好了枉疼，現(xiàn)在新增頁(yè)面不需要更改webpack配置了，只需要重新運(yùn)行一下 npm run start即可

共有頭部和底部的復(fù)用

頭部導(dǎo)航和底部通欄我們各個(gè)頁(yè)面都是一樣的鞋拟，因此需要引入骂维，那么html中怎么引入另一個(gè)html呢，這需要用到raw-loader 或 html-withimg-loader

安裝raw-loader贺纲，raw-loader可以加載文件原始內(nèi)容(utf-8格式)

npm install --save-dev raw-loader

//目錄結(jié)構(gòu)

+ src                       
   
    + html                  
         + tpl              
             - navbar.html  //共用的頭部導(dǎo)航  
             - footer.html  //共用的底部導(dǎo)航
    + page                  //頁(yè)面文件
         + index            
             - index.html   
        
          + test
             - test.html

我們?cè)趇ndex.html中可以這么引用導(dǎo)航和底部通欄

<!--引入通用的導(dǎo)航部分-->
<%=require('raw-loader!../../html/tpl/navbar.html')%>

<!--頁(yè)面的正式內(nèi)容在這里-->
<div id="app">
    <p>首頁(yè)的內(nèi)容在這里</p>
</div>

<!--引入通用的底部欄-->
<%=require('raw-loader!../../html/tpl/footer.html')%>

最初我在查找解決方案的時(shí)候航闺，看到文章推薦使用raw-loader，但是發(fā)現(xiàn)這樣存在一個(gè)問(wèn)題猴誊，就是導(dǎo)航中無(wú)法引用本地的圖片潦刃，比如導(dǎo)航中引用一個(gè)logo圖片，是找不到的稠肘，因?yàn)槲覀兇虬臅r(shí)候也會(huì)對(duì)圖片進(jìn)行處理福铅，后面添加hash值萝毛，直接寫圖片路徑是不行的项阴，后來(lái)我改用 html-withimg-loader解決了

安裝html-withimg-loader，顧名思義，這個(gè)插件可以加載帶有圖片的html

npm install --save-dev html-withimg-loader

<!--引入通用的導(dǎo)航部分-->
<%=require('html-withimg-loader!../../html/tpl/navbar.html')%>

<!--頁(yè)面的正式內(nèi)容在這里-->
<div id="app">
    <p>首頁(yè)的內(nèi)容在這里</p>
</div>

<!--引入通用的底部欄-->
<%=require('html-withimg-loader!../../html/tpl/footer.html')%>

順便提一句环揽，html中引用圖片地址是需要這樣寫的略荡，需要通過(guò)require才行，簡(jiǎn)單的填寫圖片地址是不行的

<img src="${require('../../img/react.png')}" width="50" height="50">

支持ES6編寫js

相信大家現(xiàn)在都已經(jīng)學(xué)過(guò)ES6了歉胶，可是鑒于瀏覽器的兼容性汛兜，還沒(méi)法隨心所欲的用，需要插件支持通今，我們首先安裝

npm install --save-dev babel-loader babel-core babel-preset-env

添加webpack配置

webpack.common.js粥谬，我們只對(duì)src目錄下的js進(jìn)行轉(zhuǎn)換

{
    test: /\.js$/,
    use: {
        loader: 'babel-loader'
    },
    include: path.resolve(__dirname,'../src')
},

同時(shí)在項(xiàng)目目錄下添加一個(gè)名為.babelrc的文件，對(duì)babel進(jìn)行設(shè)置辫塌，支持占有率大于1%的瀏覽器的最近2個(gè)版本

{
  "presets": [
    ["env",{
      "targets": {
        "browsers": ["> 1%", "last 2 versions"]
      }
    }]
  ],
}

babel只是將ES6語(yǔ)法轉(zhuǎn)為ES5的語(yǔ)法漏策，比如箭頭函數(shù)轉(zhuǎn)為function(){}，但是對(duì)一些ES6特有的功能沒(méi)有轉(zhuǎn)換臼氨，比如new Map()掺喻，打包之后還是new Map()，我們還需要再安裝一個(gè)插件储矩，完成這個(gè)轉(zhuǎn)換工作感耙。

npm install --save-dev babel-plugin-transform-runtime

更改.babelrc文件

{
  "presets": [
    ["env",{
      "targets": {
        "browsers": ["> 1%", "last 2 versions"]
      }
    }]
  ],
  "plugins": ["transform-runtime"]    //引入插件
}

現(xiàn)在可以放心大膽的使用ES6了

使用Less編寫樣式

首先還是安裝相關(guān)插件

npm install --save-dev less less-loader css-loader style-loader

webpack.common.js配置

{
    test: /\.css$/,
    use:["style-loader","css-loader","less-loader"]
},

在index.js文件中，我們就可以這樣引入less文件了

import './index.less'

打包之后持隧，運(yùn)行html頁(yè)面即硼，index.js會(huì)動(dòng)態(tài)把css樣式插入到html頁(yè)面，這樣會(huì)造成一個(gè)問(wèn)題屡拨，剛加載html的時(shí)候是一個(gè)樣式谦絮，js插入css樣式后是另一個(gè)樣式，造成頁(yè)面閃爍一下洁仗，體驗(yàn)不好（技術(shù)也要追求用戶體驗(yàn)啊层皱，不光是產(chǎn)品經(jīng)理的事）。這有兩個(gè)解決方案吧赠潦，第一個(gè)就是在JS未加載完成之前叫胖，顯示一個(gè)loading動(dòng)畫，把整個(gè)頁(yè)面遮蓋住她奥，第二個(gè)就是把css文件路徑打包進(jìn)html中瓮增，不要通過(guò)js動(dòng)態(tài)添加，我選用的第二個(gè)方案哩俭。

我們要把less文件打包到一個(gè)css文件中绷跑，需要用到插件extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin

webpack.common.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports={
    rules: [
        {
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader!less-loader"
            })

       },
    ]
}

plugins: [
   new ExtractTextPlugin("[name].[hash:8].css"),
]

這樣打包之后的html中會(huì)引入css文件，類似這樣


    <link href="index.5eb2501d.css" rel="stylesheet">

webpack配置

實(shí)際在我從0開始搭建的過(guò)程中凡资，是先進(jìn)行webpack這塊的配置的砸捏，之所以放到最后是不想影響主干內(nèi)容，下面我們也簡(jiǎn)單介紹一下我的webpack配置。

webpack官方推薦不寫重復(fù)的配置垦藏，即把本地和生產(chǎn)環(huán)境共用的配置放到一個(gè)文件梆暖，然后通過(guò)merge進(jìn)行合并

webpack.dev.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');

var OpenBrowserPlugin = require('open-browser-webpack-plugin');

const env=require("../config/dev.env")

module.exports=merge(common,{
    mode:"development",
    devtool: 'inline-source-map',
    plugins:[
        new webpack.DefinePlugin({
            'process.env': env
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new OpenBrowserPlugin({ url: 'http://localhost:5000' })
    ],
})

我們可以看到，通過(guò)webpack-merge插件掂骏，將共用配置webpack.common.js和開發(fā)的配置進(jìn)行合并

new webpack.DefinePlugin({
            'process.env': env
 }),

DefinePlugin定義了全局變量process.env

new OpenBrowserPlugin({ url: 'http://localhost:5000' })

這個(gè)插件是為了在我們?cè)试Snpm run start后轰驳，自動(dòng)打開頁(yè)面http://localhost:5000，避免每次都手動(dòng)打開弟灼。
webpack-dev-server 為我們提供了一個(gè)簡(jiǎn)單的 web 服務(wù)器级解，并且能夠?qū)崟r(shí)重新加載，讓我們可以實(shí)時(shí)看到開發(fā)結(jié)果田绑，關(guān)于web服務(wù)器的配置蠕趁，我放到了dev-server.js中

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

const config = require('./webpack.dev');
const options = {
    contentBase: './dist',
    hot: true,
    host: 'localhost',
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

server.listen(5000, 'localhost', () => {
    console.log('dev server listening on port 5000');
});

在package.json中，我們添加兩個(gè)腳本

"scripts": {
  "start": "node webpack/dev-server.js",
  "build": "npx webpack --config webpack/webpack.prod.js",
},

這樣我們就可以在命令行輸入兩個(gè)命令

npm run start ：進(jìn)入開發(fā)模式

npm run build：打包生產(chǎn)環(huán)境代碼

好了辛馆，基本上把我做的這個(gè)腳手架介紹完了俺陋，實(shí)際要理解還需要自己去試，看是一回事昙篙，做出來(lái)又是另一回事腊状，給別人講明白那就更不容易了，前端路漫漫苔可，大家努力吧缴挖。

github地址：https://github.com/501351981/webpack-multiple-page

這個(gè)腳手架還不完善，不過(guò)基本夠用了焚辅，后面我還會(huì)再做幾個(gè)腳手架映屋，比如結(jié)合vue進(jìn)行多頁(yè)面開發(fā)或移動(dòng)端H5開發(fā)，有興趣可以持續(xù)關(guān)注同蜻。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末棚点，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子湾蔓，更是在濱河造成了極大的恐慌瘫析，老刑警劉巖，帶你破解...
    沈念sama閱讀 212,718評(píng)論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件默责，死亡現(xiàn)場(chǎng)離奇詭異贬循，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)桃序，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評(píng)論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門杖虾，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人媒熊，你說(shuō)我怎么就攤上這事奇适》乇龋” “怎么了？”我有些...
    開封第一講書人閱讀 158,207評(píng)論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵滤愕，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我怜校，道長(zhǎng)间影，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,755評(píng)論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任茄茁，我火速辦了婚禮魂贬，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘裙顽。我一直安慰自己付燥，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評(píng)論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布愈犹。 她就那樣靜靜地躺著键科，像睡著了一般。 火紅的嫁衣襯著肌膚如雪漩怎。 梳的紋絲不亂的頭發(fā)上勋颖，一...
    開封第一講書人閱讀 50,050評(píng)論 1贊 291
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音勋锤，去河邊找鬼饭玲。 笑死，一個(gè)胖子當(dāng)著我的面吹牛叁执，可吹牛的內(nèi)容都是我干的茄厘。 我是一名探鬼主播，決...
    沈念sama閱讀 39,136評(píng)論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼谈宛，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼次哈！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起吆录，我...
    開封第一講書人閱讀 37,882評(píng)論 0贊 268
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤亿乳，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后径筏，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體葛假，經(jīng)...
    沈念sama閱讀 44,330評(píng)論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評(píng)論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年滋恬，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了聊训。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,789評(píng)論 1贊 341
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡恢氯，死狀恐怖带斑，靈堂內(nèi)的尸體忽然破棺而出鼓寺，到底是詐尸還是另有隱情，我是刑警寧澤勋磕，帶...
    沈念sama閱讀 34,477評(píng)論 4贊 333
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布妈候，位于F島的核電站，受9級(jí)特大地震影響挂滓，放射性物質(zhì)發(fā)生泄漏苦银。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評(píng)論 3贊 317
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一赶站、第九天 我趴在偏房一處隱蔽的房頂上張望幔虏。 院中可真熱鬧，春花似錦贝椿、人聲如沸想括。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評(píng)論 0贊 21
  • 一樁弒父案烙博，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)瑟蜈。三九已至，卻和暖如春渣窜，著一層夾襖步出監(jiān)牢的瞬間踪栋，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評(píng)論 1贊 267
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工图毕， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留夷都，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,598評(píng)論 2贊 362
  • 代替公主和親
    正文 我出身青樓予颤，卻偏偏與公主長(zhǎng)得像囤官，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蛤虐，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評(píng)論 2贊 351

推薦閱讀更多精彩內(nèi)容

  • 有效的管理者打算做一項(xiàng)新的業(yè)務(wù)驳庭，一定先刪除1項(xiàng)原有的業(yè)務(wù)刑顺，這對(duì)控制組織的膨脹是非常必要的膨脹，如不加以控制組織就會(huì)...
    賴佳豪閱讀 550評(píng)論 0贊 0
  • i: WHY:為何要學(xué)習(xí)這篇文章饲常？經(jīng)驗(yàn)可以幫助我們蹲堂，可以毀滅我們，也就是水能載舟 亦能覆舟贝淤。如何運(yùn)用自己的直接經(jīng)驗(yàn)...
    媛圈圈腦洞大開閱讀 606評(píng)論 0贊 1
  • 以下完全為個(gè)人總結(jié)——若發(fā)現(xiàn)問(wèn)題請(qǐng)下方評(píng)論柒竞，定回 I/O 主機(jī)主頻 50MHz （50M個(gè)時(shí)鐘周期）/s CPI ...
    pluto_S閱讀 2,570評(píng)論 0贊 2
  • 天光云影共藍(lán)，雨滴翠綠共散播聪。風(fēng)流吹去后朽基，金光繞小樓晚布隔。意贊，形贊稼虎。明曰黃花己然衅檀。
    北國(guó)青驄閱讀 185評(píng)論 0贊 5