摘要:告訴服務器從哪里提供內容。這只有在您想要提供靜態文件時才需要。文件更改將觸發整個頁面重新加載。解決辦法將卸載掉然后安裝版本的,就可解決了此問題。
webpack.config.js
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var path = require("path");
module.exports={
entry: __dirname+"/main.js", // { // index:__dirname+"/index.js", // main: __dirname+"/main.js" // } , output:{ path:__dirname+"/dist", filename:"[name].js" }, module:{ rules:[ { test:/.vue$/, loader:"vue-loader" }, { test:/.js$/, loader:"babel-loader", options:{ "presets":[ "es2015" ] } }, { test:/.css$/, use:[ "style-loader", "css-loader" ] },{ test:/.html$/, use:[ "html-loader" ] },{ test:/.png|.jpg|.gif$/, loader:"url-loader" } ] }, devServer:{ //告訴服務器從哪里提供內容。這只有在您想要提供靜態文件時才需要。例如圖片?? contentBase:path.join(__dirname + "dist"), // --告訴服務器觀看由devServer.contentBase選項提供的文件。文件更改將觸發整個頁面重新加載。 watchContentBase: true, // --隨所有內容啟用gzip壓縮 compress: true, // 模塊的熱加載,必須結合 HotModuleReplacementPlugin使用 hot: true, port: 9999, host: "localhost", inline:true, //相當于gulp的middleware中間件攔截請求; setup(app) { app.get("/some/path", function(req, res) { console.log(11) res.json({ custom: "response" }); }); }, // proxy:{ // // "/api": "http://localhost:3000/" // "/api": "http://localhost:9000" // // "/api": { // // target: "http://localhost:3000", // // pathRewrite: {"^/api" : ""}, // // secure: false // // } // } },
plugins:[
new webpack.HotModuleReplacementPlugin(), // new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: "commons", // ( 公共chunk(commnons chunk) 的名稱) filename: "commons.js", // ( 公共chunk 的文件名) }), new HtmlWebpackPlugin({ // filename: "test.html", template: "./index.html" }) ]
}
package.json
{
"name": "wlr",
"version": "1.0.0",
"description": "http://生成文件npm run startr //啟動服務,自動刷新npm run dev",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1", "start":"webpack --config webpack.config.js", "dev": "webpack-dev-server --config webpack.config.js --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.7", "html-loader": "^0.5.1", "html-webpack-plugin": "^2.30.1", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "vue-loader": "^13.3.0", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.3"
}
}
遇見的問題
1.npm run dev 啟動服務,報錯
或者
報錯原因:Webpack與webpack-dev-server版本不兼容導致。webpack是1.13.1,但webpack-dev-server是2.x以上的版本。
解決辦法:將webpack-dev-server卸載掉:npm uninstall webpack-dev-server -g
然后安裝1.15.0版本的webpack-dev-server,就可解決了此問題。:npm install webpack-dev-server@1.15.0 -g
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90302.html
摘要:中的配置熱加載插件安裝中的配置優化插件為組件分配,通過這個插件可以分析和優先考慮使用最多的模塊,并為它們分配最小的壓縮代碼分離和文件 0 前言 本文是針對TCM項目所做的WebPack配置文件總結,主要概述了一些常用配置選項和插件使用,對以后的項目有指導意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...
摘要:中的配置熱加載插件安裝中的配置優化插件為組件分配,通過這個插件可以分析和優先考慮使用最多的模塊,并為它們分配最小的壓縮代碼分離和文件 0 前言 本文是針對TCM項目所做的WebPack配置文件總結,主要概述了一些常用配置選項和插件使用,對以后的項目有指導意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...
前言 什么是webpack 本質上,webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關系圖(dependency graph),其中包含應用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉換 文件優化 代碼分割 模塊合并 ...
前言 什么是webpack 本質上,webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關系圖(dependency graph),其中包含應用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle。webpack 有哪些功能(代碼轉換 文件優化 代碼分割 模塊合并 自...
摘要:基于構建的工程一篇現在都已經出到的版本了,可我對它的認識還是停留在的版本。然后是寫啟動的命令行,也就是上面的這樣寫的意思是,當你輸入你的命令名字就會讓執行你對應命令的語句。我們首先把基本的配置引進來。 基于webpack構建的angular 1.x 工程(一)webpack篇 ??現在AngularJS都已經出到4.x的版本了,可我對它的認識還是停留在1.x的版本。 ??之前用它是為...
閱讀 1683·2021-10-13 09:39
閱讀 3154·2021-10-12 10:11
閱讀 549·2021-09-28 09:36
閱讀 2633·2019-08-30 15:55
閱讀 1384·2019-08-30 13:04
閱讀 621·2019-08-29 17:08
閱讀 1902·2019-08-29 14:14
閱讀 3399·2019-08-28 18:23