webpackの非常に新しい。
私は明らかに何か間違ったことをしている、または何か間違ったことをしています。しかし、いいえ、それは何ですか。
package.json の の下scripts
に、自分のプロジェクトで実行したい独自のスクリプトを定義しました。
ではbuild
、コンテンツを src から dist にコピーしているだけです。
以下は と のコードですwebpack.config.js
。package.json
オペレーティング システム: Windows 10
package.json
{
"name": "react-project",
"version": "1.0.0",
"description": "react-project",
"main": "index.js",
"scripts": {
"start": "npm run build",
"build": "webpack -d && xcopy src/index.html dist/index.html && webpack-dev-server --content-base src/ --hot",
"build:prod": "webpack -p && xcopy src/index.html dist/index.html"
},
"keywords": [
"react"
],
"author": "Nauman Tanwir",
"license": "ISC",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.7"
}
}
webpack.config.js
var path = require("path");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
rules: [{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
}]
}
};
module.exports = config;