webpack構(gòu)建vue項(xiàng)目

最近公司要求用vue重構(gòu)項(xiàng)目，還涉及到模塊化開發(fā)，于是乎咽瓷，我專門花了幾天的時(shí)間研究了一下webpack這個(gè)目前來看比較熱門的模塊加載兼打包工具，發(fā)現(xiàn)上手并不是很容易舰讹，現(xiàn)將總結(jié)的一些有關(guān)配置的心得分享出來茅姜，歡迎大神來拍磚。跺涤。匈睁。

一、新建一個(gè)項(xiàng)目目錄桶错，cd /d 定位進(jìn)去，然后輸入npm init胀蛮，會提示你填寫一些項(xiàng)目的信息院刁，一直回車默認(rèn)就好了，或者直接執(zhí)行npm init -y 直接跳過粪狼，這樣就在項(xiàng)目目錄下生成了一個(gè)package.json文件退腥。

二、接下來就是通過npm安裝項(xiàng)目依賴項(xiàng)再榄，命令行輸入：npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue-loader vue-html-loader vue-hot-reload-api css-loader style-loader webpack webpack-dev-server --save-dev 狡刘，繼續(xù)輸入npm install vue@^1.0.26 --save 。

這里注意的幾個(gè)點(diǎn)如下：

1.需要安裝的依賴項(xiàng)視具體的項(xiàng)目需求來定困鸥，我只是安了幾個(gè)必需的嗅蔬，后期會再加剑按；

2.輸入之后如果一直報(bào)錯(cuò)或者光標(biāo)一直在轉(zhuǎn)動(dòng)，要么是npm版本太低(需要3+)澜术，要么將npm改成cnpm艺蝴，如果沒有安裝淘寶NPM鏡像，可以先輸入npm install -g cnpm --registry=https://registry.npm.taobao.org鸟废，接著輸入cnpm -v查看是否安裝完成猜敢，然后就可以使用cnpm來代替npm；

3.可以先修改package.json文件中的devDependencies和dependencies盒延，然后再輸入npm install進(jìn)行一次性安裝（偷懶的做法缩擂，嘿嘿）；

4.dependencies中的vue默認(rèn)安裝2+添寺，如果dependencies中的vue選擇1.0.26撇叁，那么devDependencies中對應(yīng)的vue-loader最好選擇7.3.0，vue-hot-reload-api最好選擇^1.2.0畦贸，否則就會報(bào)錯(cuò)陨闹；

5.dependencies中的vue-router默認(rèn)安裝2+，無法識別router.map()這個(gè)方法薄坏，如果想要用回這個(gè)方法趋厉，最好選擇^0.7.13；

6.有時(shí)安裝一個(gè)依賴項(xiàng)胶坠，會提示還需要一并安裝別的依賴項(xiàng)君账，例如：如果要安裝bootstrap-loader，會提示要求安裝node-sass sass-loader resolve-url-loader沈善；要安裝less-loader乡数，會提示要求安裝less；

完成這一步之后闻牡，會在項(xiàng)目目錄下生成一個(gè)名node_modules的文件净赴，對應(yīng)的package.json文件中的內(nèi)容變動(dòng)如下（我額外添加了幾個(gè)依賴項(xiàng)）：

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important; white-space: pre-wrap;"> "devDependencies": { "autoprefixer-loader": "^3.2.0", "babel-core": "^6.18.2", "babel-loader": "^6.2.7", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "^6.18.0", "babel-preset-stage-0": "^6.16.0", "babel-runtime": "^6.18.0", "css-loader": "^0.25.0", "debug": "^2.2.0", "express": "^4.14.0", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "html-webpack-plugin": "^2.24.1", "jquery": "^3.1.1", "less": "^2.7.1", "less-loader": "^2.2.3", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "vue-hot-reload-api": "^1.2.0", "vue-html-loader": "^1.2.3", "vue-loader": "^7.3.0", "webpack": "^1.13.3", "webpack-dev-middleware": "^1.8.4", "webpack-dev-server": "^1.16.2", "webpack-hot-middleware": "^2.13.1" }, "dependencies": { "vue": "^1.0.26", "vue-router": "^0.7.13" }</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

三、在項(xiàng)目目錄下新建一個(gè)名為src的目錄罩润，里面用于存放入口文件（index.js）玖翅、項(xiàng)目源文件（html,css,js,img之類的）、組件（.vue后綴）割以，我的src目錄結(jié)構(gòu)大致如下：

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important; white-space: pre-wrap;">src -entry -index.js -pages -components -css -img -js -index.html -public</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

當(dāng)然金度，有輸入目錄，就有輸出目錄严沥，即在項(xiàng)目目錄下新建一個(gè)output目錄猜极，用于放置生產(chǎn)出來的各種資源文件。

四消玄、在項(xiàng)目目錄下新建一個(gè)名為build目錄跟伏，里面用于存放各種配置文件丢胚，涉及到基礎(chǔ)配置、開發(fā)和生產(chǎn)環(huán)境酬姆、靜態(tài)服務(wù)器以及熱加載嗜桌，詳細(xì)的內(nèi)容請看下面的代碼：

1.webpack.config.js（基礎(chǔ)配置文件）

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important; white-space: pre-wrap;">// 引入依賴模塊
var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = { // 入口文件，路徑相對于本文件所在的位置辞色，可以寫成字符串骨宠、數(shù)組、對象
entry: { // path.resolve([from ...], to) 將to參數(shù)解析為絕對路徑
index:path.resolve(__dirname, '../src/entry/index.js'), // 需要被提取為公共模塊的群組
vendors:['vue','vue-router','jquery'],
}, // 輸出配置
output: { // 輸出文件相满，路徑相對于本文件所在的位置
path: path.resolve(__dirname, '../output/static/js/'), // 設(shè)置publicPath這個(gè)屬性會出現(xiàn)很多問題：
// 1.可以看成輸出文件的另一種路徑层亿，差別路徑是相對于生成的html文件；
// 2.也可以看成網(wǎng)站運(yùn)行時(shí)的訪問路徑立美；
// 3.該屬性的好處在于當(dāng)你配置了圖片CDN的地址匿又，本地開發(fā)時(shí)引用本地的圖片資源，上線打包時(shí)就將資源全部指向CDN了建蹄，如果沒有確定的發(fā)布地址不建議配置該屬性碌更，特別是在打包圖片時(shí)，路徑很容易出現(xiàn)混亂洞慎，如果沒有設(shè)置痛单，則默認(rèn)從站點(diǎn)根目錄加載
// publicPath: '../static/js/',

    // 基于文件的md5生成Hash名稱的script來防止緩存
    filename: '[name].[hash].js', // 非主入口的文件名，即未被列在entry中劲腿，卻又需要被打包出來的文件命名配置
    chunkFilename: '[id].[chunkhash].js' }, // 其他解決方案

resolve: { // require時(shí)省略的擴(kuò)展名旭绒，遇到.vue結(jié)尾的也要去加載
extensions: ['','.js', '.vue'], // 模塊別名地址，方便后續(xù)直接引用別名焦人，無須寫長長的地址挥吵，注意如果后續(xù)不能識別該別名，需要先設(shè)置root
alias:{}
}, // 不進(jìn)行打包的模塊
externals:{}, // 模塊加載器
module: { // loader相當(dāng)于gulp里的task花椭，用來處理在入口文件中require的和其他方式引用進(jìn)來的文件忽匈，test是正則表達(dá)式，匹配要處理的文件个从；loader匹配要使用的loader脉幢，"-loader"可以省略；include把要處理的目錄包括進(jìn)來嗦锐，exclude排除不處理的目錄
loaders: [ // 使用vue-loader 加載 .vue 結(jié)尾的文件
{
test: /.vue/, loader: 'vue-loader', exclude: /node_modules/ }, // 使用babel 加載 .js 結(jié)尾的文件 { test: /\.js/,
loader: 'babel',
exclude: /node_modules/,
query:{
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
}, // 使用css-loader和style-loader 加載 .css 結(jié)尾的文件
{
test: /.css/, // 將樣式抽取出來為獨(dú)立的文件 loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader"), exclude: /node_modules/ }, // 使用less-loader、css-loader和style-loade 加載 .less 結(jié)尾的文件 { test: /\.less/, // 將樣式抽取出來為獨(dú)立的文件
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!less-loader"),
exclude: /node_modules/ }, // 加載圖片
{
test: /.(png|jpg|gif)/, loader: 'url-loader', query: { // 把較小的圖片轉(zhuǎn)換成base64的字符串內(nèi)嵌在生成的js文件里 limit: 10000, // 路徑要與當(dāng)前配置文件下的publicPath相結(jié)合 name:'../img/[name].[ext]?[hash:7]' } }, // 加載圖標(biāo) { test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)/,
loader: 'file-loader',
query: { // 把較小的圖標(biāo)轉(zhuǎn)換成base64的字符串內(nèi)嵌在生成的js文件里
limit: 10000,
name:'../fonts/[name].[ext]?[hash:7]',
prefix:'font' }
},
]
}, // 配置插件項(xiàng)
plugins: []
}</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

2.webpack.dev.config.js（開發(fā)環(huán)境下的配置文件）

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important; white-space: pre-wrap;">// 引入依賴模塊
var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); // 引入基本配置
var config = require('./webpack.config.js'); // 必須修改原配置中網(wǎng)站運(yùn)行時(shí)的訪問路徑沪曙，相當(dāng)于絕對路徑奕污，修改完之后，當(dāng)前配置文件下的很多相對路徑都是相對于這個(gè)來設(shè)定液走； // 注意：webpack-dev-server會實(shí)時(shí)的編譯碳默，但是最后的編譯的文件并沒有輸出到目標(biāo)文件夾贾陷，而是保存到了內(nèi)存當(dāng)中
config.output.publicPath = '/'; // 重新配置模塊加載器
config.module= { // test是正則表達(dá)式，匹配要處理的文件嘱根；loader匹配要使用的loader髓废，"-loader"可以省略；include把要處理的目錄包括進(jìn)來该抒，exclude排除不處理的目錄
loaders: [ // 使用vue-loader 加載 .vue 結(jié)尾的文件
{
test: /.vue/, loader: 'vue-loader', exclude: /node_modules/ }, // 使用babel 加載 .js 結(jié)尾的文件 { test: /\.js/,
loader: 'babel',
exclude: /node_modules/,
query:{
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
}, // 使用css-loader慌洪、autoprefixer-loader和style-loader 加載 .css 結(jié)尾的文件
{
test: /.css/, // 將樣式抽取出來為獨(dú)立的文件 loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader"), exclude: /node_modules/ }, // 使用less-loader、autoprefixer-loader凑保、css-loader和style-loade 加載 .less 結(jié)尾的文件 { test: /\.less/, // 將樣式抽取出來為獨(dú)立的文件
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!less-loader"),
exclude: /node_modules/ }, // 加載圖片
{
test: /.(png|jpg|gif)/, loader: 'url-loader', query: { // 把較小的圖片轉(zhuǎn)換成base64的字符串內(nèi)嵌在生成的js文件里 limit: 10000, // 路徑和生產(chǎn)環(huán)境下的不同冈爹，要與修改后的publickPath相結(jié)合 name: 'img/[name].[ext]?[hash:7]' } }, // 加載圖標(biāo) { test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)/,
loader: 'file-loader',
query: {
limit: 10000, // 路徑和生產(chǎn)環(huán)境下的不同，要與修改后的publickPath相結(jié)合
name:'fonts/[name].[ext]?[hash:7]',
prefix:'font' }
},
]
}; // 重新配置插件項(xiàng)
config.plugins = [ // 位于開發(fā)環(huán)境下
new webpack.DefinePlugin({ 'process.env': {
NODE_ENV: '"development"' }
}), // 自動(dòng)生成html插件欧引，如果創(chuàng)建多個(gè)HtmlWebpackPlugin的實(shí)例频伤，就會生成多個(gè)頁面
new HtmlWebpackPlugin({ // 生成html文件的名字，路徑和生產(chǎn)環(huán)境下的不同芝此，要與修改后的publickPath相結(jié)合憋肖，否則開啟服務(wù)器后頁面空白
filename: 'src/pages/index.html', // 源文件，路徑相對于本文件所在的位置
template: path.resolve(__dirname, '../src/pages/index.html'), // 需要引入entry里面的哪幾個(gè)入口婚苹，如果entry里有公共模塊岸更，記住一定要引入
chunks: ['vendors','index'], // 要把<script>標(biāo)簽插入到頁面哪個(gè)標(biāo)簽里(body|true|head|false)
inject: 'body', // 生成html文件的標(biāo)題
title:''
// hash如果為true，將添加hash到所有包含的腳本和css文件租副，對于解除cache很有用
// minify用于壓縮html文件坐慰，其中的removeComments:true用于移除html中的注釋，collapseWhitespace:true用于刪除空白符與換行符
}), // 提取css單文件的名字用僧，路徑和生產(chǎn)環(huán)境下的不同结胀，要與修改后的publickPath相結(jié)合
new ExtractTextPlugin("[name].[contenthash].css"), // 提取入口文件里面的公共模塊
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors.js',
}), // 為組件分配ID，通過這個(gè)插件webpack可以分析和優(yōu)先考慮使用最多的模塊责循，并為它們分配最小的ID
new webpack.optimize.OccurenceOrderPlugin(), // 模塊熱替換插件
new webpack.HotModuleReplacementPlugin(), // 允許錯(cuò)誤不打斷程序
new webpack.NoErrorsPlugin(), // 全局掛載插件
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery", "window.jQuery":"jquery" })
]; // vue里的css也要單獨(dú)提取出來
config.vue = {
loaders: {
css: ExtractTextPlugin.extract("css")
}
}; // 啟用source-map糟港，開發(fā)環(huán)境下推薦使用cheap-module-eval-source-map
config.devtool='cheap-module-eval-source-map'; // 為了實(shí)現(xiàn)熱加載，需要?jiǎng)討B(tài)向入口配置中注入 webpack-hot-middleware/client 院仿，路徑相對于本文件所在的位置 // var devClient = 'webpack-hot-middleware/client'; // 為了修改html文件也能實(shí)現(xiàn)熱加載秸抚，需要修改上面的devClient變量，引入同級目錄下的dev-client.js文件
var devClient = './build/dev-client'; // Object.keys()返回對象的可枚舉屬性和方法的名稱
Object.keys(config.entry).forEach(function (name, i) { var extras = [devClient];
config.entry[name] = extras.concat(config.entry[name]);
})

module.exports = config;</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

3.webpack.prod.config.js（生產(chǎn)環(huán)境下的配置文件）

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important; white-space: pre-wrap;">// 引入依賴模塊
var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); // 引入基本配置
var config = require('./webpack.config'); // 重新配置插件項(xiàng)
config.plugins = [ // 位于生產(chǎn)環(huán)境下
new webpack.DefinePlugin({ 'process.env': {
NODE_ENV: '"production"' }
}), // 自動(dòng)生成html插件歹垫，如果創(chuàng)建多個(gè)HtmlWebpackPlugin的實(shí)例剥汤，就會生成多個(gè)頁面
new HtmlWebpackPlugin({ // 生成html文件的名字，路徑相對于輸出文件所在的位置
filename: '../../html/index.html', // 源文件排惨，路徑相對于本文件所在的位置
template: path.resolve(__dirname, '../src/pages/index.html'), // 需要引入entry里面的哪幾個(gè)入口吭敢，如果entry里有公共模塊，記住一定要引入
chunks: ['vendors','special','index'], // 要把<script>標(biāo)簽插入到頁面哪個(gè)標(biāo)簽里(body|true|head|false)
inject: 'body', // 生成html文件的標(biāo)題
title:'', // hash如果為true暮芭，將添加hash到所有包含的腳本和css文件鹿驼，對于解除cache很有用
// minify用于壓縮html文件欲低，其中的removeComments:true用于移除html中的注釋，collapseWhitespace:true用于刪除空白符與換行符
}), // 提取css單文件的名字畜晰，路徑相對于輸出文件所在的位置
new ExtractTextPlugin("../css/[name].[contenthash].css"), // 提取入口文件里面的公共模塊
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors.js',
}), // 壓縮js代碼
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false }, // 排除關(guān)鍵字砾莱，不能混淆
except:['/pre>,'exports','require']
}), // 為組件分配ID，通過這個(gè)插件webpack可以分析和優(yōu)先考慮使用最多的模塊凄鼻，并為它們分配最小的ID
new webpack.optimize.OccurenceOrderPlugin(), // 全局掛載插件腊瑟，當(dāng)模塊使用這些變量的時(shí)候，wepback會自動(dòng)加載野宜，區(qū)別于window掛載
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery", "window.jQuery":"jquery" })
]; // vue里的css也要單獨(dú)提取出來
config.vue = {
loaders: {
css: ExtractTextPlugin.extract("css")
}
}; // 開啟source-map扫步，生產(chǎn)環(huán)境下推薦使用cheap-source-map或source-map，后者得到的.map文件體積比較大匈子，但是能夠完全還原以前的js代碼
config.devtool='source-map'; // 關(guān)閉source-map // config.devtool=false;
module.exports = config;</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

4.dev-server.js（服務(wù)器配置文件）

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important; white-space: pre-wrap;">// 引入依賴模塊
var express = require('express'); var webpack = require('webpack'); var config = require('./webpack.dev.config.js'); // 創(chuàng)建一個(gè)express實(shí)例
var app = express(); // 對網(wǎng)站首頁的訪問返回 "Hello World!" 字樣
app.get('/', function (req, res) {
res.send('Hello World!');
}); // 調(diào)用webpack并把配置傳遞過去
var compiler = webpack(config); // 使用 webpack-dev-middleware 中間件河胎，搭建服務(wù)器
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: config.output.publicPath,
stats: {
colors: true,
chunks: false }
}) // 使用 webpack-hot-middleware 中間件，實(shí)現(xiàn)熱加載
var hotMiddleware = require('webpack-hot-middleware')(compiler); // 為了修改html文件也能實(shí)現(xiàn)熱加載虎敦，使用webpack插件來監(jiān)聽html源文件改變事件
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { // 發(fā)布事件
hotMiddleware.publish({ action: 'reload' });
cb();
})
}); // 注冊中間件
app.use(devMiddleware);
app.use(hotMiddleware); // 監(jiān)聽 8888 端口游岳，開啟服務(wù)器
app.listen(8888, function (err) { if (err) {
console.log(err); return;
}
console.log('Listening at http://localhost:8888');
})</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

5.dev-client.js（配合dev-server.js監(jiān)聽html文件改動(dòng)也能夠觸發(fā)自動(dòng)刷新）

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important; white-space: pre-wrap;">// 引入 webpack-hot-middleware/client
var hotClient = require('webpack-hot-middleware/client'); // 訂閱事件，當(dāng) event.action === 'reload' 時(shí)執(zhí)行頁面刷新
hotClient.subscribe(function (event) { if (event.action === 'reload') {
window.location.reload();
}
})</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

五其徙、為了不必每次構(gòu)建項(xiàng)目都要輸入webpack --display-modules --display-chunks --config build/webpack.config.js這條長命令胚迫，我們在package.js文件中修改“scripts”項(xiàng)：

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important; white-space: pre-wrap;">"scripts": { "build":"webpack --display-modules --display-chunks --config build/webpack.config.js", "dev":"node ./build/dev-server.js" }</pre>

注意：package.js中不能有注釋。

這樣唾那，我們就可以通過執(zhí)行 npm run build 來進(jìn)行構(gòu)建访锻，同時(shí)還增加了一條開啟開發(fā)服務(wù)器的命令 npm run dev。

六闹获、網(wǎng)上很多人講解webpack配置是按“先……然后……”的邏輯往下走期犬，以及每走一步會說明走這一步的原因是什么，配完之后的結(jié)果是什么避诽，出了問題該怎么解決旷坦，這種撰文方式確實(shí)幫了很多入門webpack的小白們（譬如我）很大的忙嬉愧。所以這里我就省略了這些步驟芽狗，而是直接將最后一步的配置結(jié)果展現(xiàn)出來給大家看咸这，并且附上了詳細(xì)的注釋（寫得嘔心瀝血啊）供大家理解，以后不出意外應(yīng)該會出webpack構(gòu)建vue的進(jìn)階篇拱雏，敬請期待

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末棉安，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子铸抑，更是在濱河造成了極大的恐慌垂券，老刑警劉巖，帶你破解...
    沈念sama閱讀 212,686評論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件羡滑，死亡現(xiàn)場離奇詭異菇爪，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)柒昏，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,668評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門凳宙，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人职祷，你說我怎么就攤上這事氏涩。” “怎么了有梆？”我有些...
    開封第一講書人閱讀 158,160評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵是尖，是天一觀的道長。 經(jīng)常有香客問我泥耀，道長饺汹，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,736評論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任痰催，我火速辦了婚禮兜辞，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘夸溶。我一直安慰自己逸吵，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,847評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布缝裁。 她就那樣靜靜地躺著扫皱，像睡著了一般。 火紅的嫁衣襯著肌膚如雪捷绑。 梳的紋絲不亂的頭發(fā)上韩脑，一...
    開封第一講書人閱讀 50,043評論 1贊 291
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音胎食，去河邊找鬼扰才。 笑死，一個(gè)胖子當(dāng)著我的面吹牛厕怜，可吹牛的內(nèi)容都是我干的衩匣。 我是一名探鬼主播，決...
    沈念sama閱讀 39,129評論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼粥航，長吁一口氣：“原來是場噩夢啊……” “哼琅捏！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起递雀，我...
    開封第一講書人閱讀 37,872評論 0贊 268
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤柄延，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體搜吧，經(jīng)...
    沈念sama閱讀 44,318評論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡市俊，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,645評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了滤奈。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片摆昧。...
    茶點(diǎn)故事閱讀 38,777評論 1贊 341
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖蜒程，靈堂內(nèi)的尸體忽然破棺而出绅你，到底是詐尸還是另有隱情，我是刑警寧澤昭躺，帶...
    沈念sama閱讀 34,470評論 4贊 333
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布忌锯，位于F島的核電站，受9級特大地震影響领炫，放射性物質(zhì)發(fā)生泄漏偶垮。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,126評論 3贊 317
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一驹吮、第九天 我趴在偏房一處隱蔽的房頂上張望针史。 院中可真熱鬧，春花似錦碟狞、人聲如沸啄枕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,861評論 0贊 21
  • 一樁弒父案族沃，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽频祝。三九已至，卻和暖如春脆淹，著一層夾襖步出監(jiān)牢的瞬間常空，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,095評論 1贊 267
  • 情欲美人皮
    我被黑心中介騙來泰國打工盖溺， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留漓糙，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,589評論 2贊 362
  • 代替公主和親
    正文 我出身青樓烘嘱，卻偏偏與公主長得像昆禽，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子蝇庭，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,687評論 2贊 351