webpack css 模块化三

1 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

}

]

},

devServer: {

open: true,

port: 9000

}

};