let path=require ("path");
let webpack=require ("webpack");
let HtmlWebpackPlugin=require ("html-webpack-plugin");
let CleanWebpackPlugin = require ("clean-webpack-plugin");
let ExtractTextWebpackPlugin=require ("extract-text-webpack-plugin");
let index = new ExtractTextWebpackPlugin (". / css/index.css");
let reset = new ExtractTextWebpackPlugin (". / css/reset.css");
module.exports= {
entry:{
index:"./src/index.js",
utils:"./src/utils.js"
},
output:{
filename:"./js/[name].js",
path:path.resolve("dist")
},
module:{
rules:[
{
test: /\.css$/,
use: reset.extract({
use: "css-loader"
})
},
{
test: /\.less$/,
use: index.extract({
use: "css-loader",
publicPath:"../"
})
},
{
test: /\.(jpe?g|png|gif)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
outputPath: "images/"
}
}
]
},
{
test: /\.(htm|html)$/,
use: "html-withimg-loader"
},
{
test: /\.(eot|ttf|woff|svg)$/,
use: "file-loader"
},
{
test:/\.js$/,
//use: "babel-loader",
include: /src/,
exclude: /node_modules/
}
]
},
plugins:[
new CleanWebpackPlugin("dist"),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template:"./src/index.html",
hash:true
}),
reset,
index
],
devServer: {
contentBase: "./dist",
host: "localhost",
port: 3000,
open: true,
hot: true
}
< H2 >}; < / H2 >
above is the code of the webpack.config.js file
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"html-withimg-loader": "^0.1.16",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"style-loader": "^0.23.0",
"url-loader": "^1.1.1",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.6"
}
< H2 >} < / H2 >above is the code of the package.json file
Why just add {
to the configuration of modules test:/\.js$/,
//use: "babel-loader",
include: /src/,
exclude: /node_modules/
}
use: "babel-loader"