1. package.json
"devDependencies": {
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.29.6",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"font-awesome": "^4.7.0",
"react": "^16.8.4",
"react-dom": "^16.8.4"
}
2 webpack.config.js
const path = require("path");
const htmlPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.join(__dirname, "dist")
},
plugins: [
new htmlPlugin({
template: "./index.html"
})
],
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ["env", "react"]
}
},
{
test: /\.css$/, //对目录里面非node_modules，src/common目录下面的css文件开启模块化，页面里引用时候以模块方式引用
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true, //开启css模块化
localIdentName: "[name]-[local]_[hash:base64:6]"
}
}
],
exclude: [
//排除这两个文件夹下面的css文件
path.resolve(__dirname, "node_modules")
]
}, //对node_modules,src/common目录下面的css文件以全局方式引用，应用到页面
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
include: [
//样式只应用到这两个文件夹下面的css文件中
path.resolve(__dirname, "node_modules")
]
},
{
test: /\.(png|jpe?g|gif|svg|jpg|gif)(\?.*)?$/,
loader: "url-loader",
options: {
limit: 10000
}
},
{
test: /\.(ttf|eot|woff|woff2|svg)$/,
use: ["file-loader"] //1.把你的资源移动到输出目录2.返回最终引入资源的url
},
{
test: /\.less$/,
use: ["style-loader", {
loader:"css-loader",
options:{
modules:true
}
}, "less-loader"]
},
{
test: /\.scss$/,
use: ["style-loader", {
loader:"css-loader",
options:{
modules:true
}
}, "sass-loader"] //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
}
]
},
devServer: {
open: true,
port: 9000
}
};