我们需要准备一些文件夹 src/styles/css/common.css
-
html,body {
-
margin:
0;
-
padding:
0;
-
background: olive;
-
}
-
-
ul, li ,ol {
-
list-style: none;
-
margin:
0;
-
padding:
0;
-
}
在 src/app.js 引入 src/styles/css/common.css
-
import
'./styles/css/common.css'
-
import layer from
'./components/layer/layer.js'
-
-
const App = () => {
-
console.log(
"layer==>", layer)
-
}
-
-
new App()
然后我们需要 配置 css-loader
-
let path = require(
'path')
-
let htmlWebpackPlugin = require(
'html-webpack-plugin')
-
function resolve(o) {
-
return path.resolve(__dirname, o)
-
}
-
module.exports = {
-
entry: resolve(
'src/app.js'),
// 指定入口文件
-
output: {
-
path: resolve(
'dist'),
-
// filename: '[name]-[hash].js'
-
filename:
"js/[name].bundle.js",
-
// publicPath: ''
-
},
-
module: {
-
rules: [
-
{
-
test: /\.js$/,
-
loader:
'babel-loader',
-
exclude: resolve(
'node_modules'),
//指定排除的范围,
-
include: resolve(
'src')
-
},
-
{
-
test: /\.html$/,
-
loader:
'html-loader'
-
},
-
{
-
test: /\.css$/,
-
loader:
'style-loader!css-loader'
-
}
-
]
-
},
-
plugins: [
-
new htmlWebpackPlugin({
-
// filename: "index-[hash].html",
-
// filename: 'index-[chunkhash].html',
-
filename:
"index.html",
// 生成 dist/a.html
-
template:
'index.html',
// 指定根目录下的 index.html
-
inject:
'body',
-
})
-
]
-
}
然后执行 npm run webpack.app
样式生效，控制台打印出来了
需要安装 sass-loader node-sass 解析 scss/sass
需要安装 postcss-loader 处理浏览器样式前缀
需要安装 autoprefixer 插件
配置 webpack.app.config.js
-
let path = require(
'path')
-
let htmlWebpackPlugin = require(
'html-webpack-plugin')
-
function resolve(o) {
-
return path.resolve(__dirname, o)
-
}
-
module.exports = {
-
entry: resolve(
'src/app.js'),
// 指定入口文件
-
output: {
-
path: resolve(
'dist'),
-
// filename: '[name]-[hash].js'
-
filename:
"js/[name].bundle.js",
-
// publicPath: ''
-
},
-
module: {
-
rules: [
-
{
-
test: /\.js$/,
-
loader:
'babel-loader',
-
exclude: resolve(
'node_modules'),
//指定排除的范围,
-
include: resolve(
'src')
-
},
-
{
-
test: /\.html$/,
-
loader:
'html-loader'
-
},
-
{
-
test: /\.css$/,
-
loader:
'style-loader!css-loader!postcss-loader'
-
},
-
{
-
test: /\.s[c|a]ss$/,
-
loader:
'sass-loader'
-
}
-
]
-
},
-
plugins: [
-
new htmlWebpackPlugin({
-
// filename: "index-[hash].html",
-
// filename: 'index-[chunkhash].html',
-
filename:
"index.html",
// 生成 dist/a.html
-
template:
'index.html',
// 指定根目录下的 index.html
-
inject:
'body',
-
})
-
]
-
}
在根目下新增一个 postcss.config.js
-
module.exports = {
-
plugins: [
-
require(
'autoprefixer')
-
]
-
}
package.json
-
{
-
"name":
"webpackdemo",
-
"version":
"1.0.0",
-
"description":
"",
-
"main":
"index.js",
-
"scripts": {
-
"build":
"webpack --mode development",
-
"webpack.dev":
"webpack --mode development --config webpack.dev.config.js",
-
"webpack.entry":
"webpack --mode development --config webpack.entry.config.js",
-
"webpack.entry.object":
"webpack --mode development --config webpack.entry.object.config.js",
-
"webpack.html.plugin":
"webpack --mode development --config webpack.html.plugin.config.js",
-
"webpack.html.plugin.multi":
"webpack --mode development --config webpack.html.plugin.multi.config.js",
-
"webpack.app":
"webpack --mode development --config webpack.app.config.js",
-
"test":
"echo \"Error: no test specified\" && exit 1"
-
},
-
"author":
"",
-
"license":
"ISC",
-
"devDependencies": {
-
"@babel/cli":
"^7.7.4",
-
"@babel/core":
"^7.7.4",
-
"@babel/preset-env":
"^7.7.4",
-
"autoprefixer":
"^9.7.2",
-
"babel-core":
"^6.26.3",
-
"babel-loader":
"^8.0.6",
-
"css-loader":
"^3.2.0",
-
"html-loader":
"^0.5.5",
-
"html-webpack-plugin":
"^3.2.0",
-
"node-sass":
"^4.13.0",
-
"postcss-loader":
"^3.0.0",
-
"sass-loader":
"^8.0.0",
-
"style-loader":
"^1.0.0",
-
"webpack":
"^4.41.2",
-
"webpack-cli":
"^3.3.10"
-
}
-
}
跑一遍 npm run webpack.app
我们会发现我们希望处理的浏览器前缀竟然没有生效，其实 css-loader 有一个参数是 importLoaders=1,表示处理后续的 loader 当我们的样式存在 @import 其他样式的时候，需要 postcss-loader 去处理的时候，就要传递这个参数
我们再来看看浏览器
嗯，今天就到此为止吧，接下来的 就等明天吧，该洗洗睡了
转载：https://blog.csdn.net/qq_36772866/article/details/106581069
查看评论