Comments (3)
嗨,您好。
我猜想會不會是因為 webpack 版本更新所造成的問題
前幾日在嘗試運作範例時也碰到一些問題,回憶我當時除了安裝 webpack-cli 之外還將 webpack.config.js 的檔案做了些修改,下面是我修改後的檔案內容:
// 這邊使用 HtmlWebpackPlugin,將 bundle 好的 <script> 插入到 body。${__dirname} 為 ES6 語法對應到 __dirname
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: `${__dirname}/app/index.html`,
filename: 'index.html',
inject: 'body',
});
module.exports = {
// 檔案起始點從 entry 進入,因為是陣列所以也可以是多個檔案
entry: [
'./app/index.js',
],
// output 是放入產生出來的結果的相關參數
output: {
path: `${__dirname}/dist`,
filename: 'index_bundle.js',
},
module: {
// loaders 則是放欲使用的 loaders,在這邊是使用 babel-loader 將所有 .js(這邊用到正則式)相關檔案
// (排除了 npm 安裝的套件位置 node_modules)轉譯成瀏覽器可以閱讀的 JavaScript。preset 則是使用的 babel 轉譯規則,這邊使用 react、es2015。
// 若是已經單獨使用 .babelrc 作為 presets 設定的話,則可以省略 query
// webpack 版本更新導致schema結構改變: https://webpack.js.org/guides/migrating/#module-preloaders-and-module-postloaders-were-removed-
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
enforce: "pre",
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
},
},
],
},
// devServer 則是 webpack-dev-server 設定
devServer: {
inline: true,
port: 8008,
},
// plugins 放置所使用的外掛
plugins: [HTMLWebpackPluginConfig],
};
相關的資訊可以在這裡找到
希望有幫助到您
from reactjs101.
接著我做到 npm run dev 的階段,終端機跳出警告說還需要安裝 webpack-cli ,不知道是不是哪邊版本不同才導致的問題,但在安裝 cli 之後,問題似乎更嚴重了。
`✖ 「wds」: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
-> Options affecting the normal modules (NormalModuleFactory
).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev:webpack-dev-server --devtool eval --progress --colors --content-base build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
`
from reactjs101.
確實幫助到我了,感謝你細心觀察發現這個問題!
from reactjs101.
Related Issues (20)
- WebPack 2.x replace loader to rules HOT 1
- npm run dev 失敗 HOT 2
- Ch02 .1 webpack.config.js不全,npm run dev跑不起来 HOT 1
- CH10. 食譜網站實作疑問
- 模板template和组件component具体有什么差别呢?
- it takes me to https://legacy.gitbook.com/book/kdchang/react101/details
- Ch4 Ch5 關於stateless component的小疑問
- 【React源码专题文章推荐】专注于React源码解析的文章
- travis CI build failed HOT 1
- 希望能补上函数式react的用法讲解,对于每一个实例
- 學習 React HOT 1
- CH09编译出错
- 在Ch04的例子中,新版本的propTypes需要引入新的包prop-types
- ch10 createAction first parameter should apply const not string?
- Ch03 npm start 編譯失敗
- ch09:Uncaught TypeError: Cannot read property 'EventPluginHub' of undefined HOT 1
- Ch2 webpack error messenge HOT 2
- English [en-US] translation HOT 1
- The Travis CI build failed
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactjs101.