上节的例子中，我们使用插件自动引入了打包后的文件，每当我们修改源文件后，我们想查看修改后的效果都要打包，刷新浏览器，如果修改后能实时的显示效果就好了，可以尝试使用 webpack-dev-server，恰好可以实现我们想要的功能。
安装
npm install --save-dev webpack-dev-servermy.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ devServer: {
+ contentBase: './dist',
+ },
plugins: [
new HtmlWebpackPlugin()
],
}package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config my.config.js",
+ "dev": "webpack-dev-server --config my.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
}
}运行npm run dev,成功后就可以在控制台看到相应的信息，然后浏览器打开http://localhost:8080/，修改源文件index.js文件的输出，然后浏览器就会自动刷新，显示对应的变化。webpack-dev-server 带有许多可配置的选项。点击这里查看更多。
首先对文件做如下修改,新增一个css文件，然后再index.js文件中引入。
webpack-demo
package.json
my.config.js
+ index.html
/src
index.js
+ style.css index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="hello">
hello,qzy
</div>
</body>
</html>style.css
.hello{
color: red;
}my.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
},
plugins: [
new HtmlWebpackPlugin({
+ template:'./index.html'
})
],
}index.js
console.log('qzy');
+ require('./style.css')这时控制台会报出如下错误，你需要一个合适的loader来处理此文件。
You may need an appropriate loader to handle this file type.为了从 JavaScript 模块中import?一个 CSS 文件，你需要在module配置、安装并添加style-loader、css-loader
安装
npm install --save-dev style-loader css-loadercss-loader 用来处理css文件,style-loader用来处理处理的文件放入head标签中
修改配置文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
},
plugins: [
new HtmlWebpackPlugin({
template:'./index.html'
})
],
+ module:{
+ rules:[
+ {
+ test: /\.css$/,
+ use:['style-loader','css-loader']
+ }
+ ]
+ }
}每一次修改配置文件之后都需要重新启动。重新启动之后发现页面中的字体变成了红色。
module：这些选项决定了如何处理项目中的不同类型的模块。
module.rules 数组,创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
test:是一个正则,匹配所以已.css结尾的文件。
use:规定使用何种loader处理匹配到的文件。loader的执行顺序默认是从右往左的,假如上面的例子中我们将loader调换位置就会报错，这是因为我们是先处理css文件，再将文件插入到head标签内,顺序错误的话就会识别不出来。
上面的例子中loader我们也可以以这种方式,这样我们可以在options对象中传递相应的配置参数
use: [{
loader: 'style-loader',
options: {}
}, 'css-loader']现在修改index.html文件如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
+ <style>
+ .hello{
+ color: pink;
+ }
</style>
<body>
<div class="hello">
hello,qzy
</div>
</body>
</html>我们在文件中添加了一个样式，然后刷新的话可以看到写的样式没有生效。这是因为style-loader会将css文件默认放到head标签的末尾。我们修改style-loader配置项让文件放到最上方
my.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
],
module: {
rules: [{
test: /\.css$/,
- use:['style-loader','css-loader']
+ use: [{
+ loader: 'style-loader',
+ options: {
+ insertAt: 'top'
+ }
+ }, 'css-loader']
}]
}
}再次运行就可以看到效果了。
最重要的是，现有的 loader 可以支持任何你可以想到的 CSS 处理器风格 - postcss, sass 和 less 等。我们现在处理一下sass。sass有两种语法：sass与scss,我们此次是sccs语法。修改目录
webpack-demo
package.json
my.config.js
index.html
/src
index.js
style.css
+ style.scssstyle.scss
$color: #F90;
.hello {
$width: 100px;
width: $width;
background-color: $color;
}安装loader
npm install sass-loader node-sass webpack --save-dev修改配置文件,因为要处理scss文件，所以我们要新增一条规则，并在使用loader是先将scss文件转化为css文件，其他的就与css文件处理一致了
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
],
module: {
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader',
options: {
insertAt: 'top'
}
}, 'css-loader']
},
+ {
+ test: /\.scss$/,
+ use: ['style-loader', 'css-loader', 'sass-loader']
+ }
]
}
}从上面的例子中我们不难发现我们的样式是被放到了页面中的style标签内，但是假如我们想将这些样式单独抽离成一个文件，该怎么做呢？
安装插件
npm install --save-dev mini-css-extract-plugin修改配置文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
+ new MiniCssExtractPlugin({
+ filename:'main.css'//抽离的文件名
+ }),
],
module: {
rules: [{
test: /\.css$/,
use: [{
- loader:'style-loader',
+ loader: MiniCssExtractPlugin.loader,
}, 'css-loader']
}, {
test: /\.scss$/,
- use: ['style-loader', 'css-loader', 'sass-loader']
+ use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}]
}
}因为需要抽离单独的css文件，所以对于的规则也需修改。再次运行就会发现样式已经被抽离到了main.css文件中了。
开始之前请看如下代码
//原始
display: flex;
transform: rotate(45deg);
//转化后
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);为了兼容不同的浏览器，我们再使用css3属性时，一般都需要加上浏览器特有的前缀，现在我们使用工具来帮助我们自动补全浏览器前缀。
修改style.scss如下
$color: #f90;
.hello {
$width: 100px;
width: $width;
background-color: $color;
+ display: flex;
+ transform: rotate(45deg);
}安装
npm install --save-dev postcss-loader修改配置文件中的scss处理的规则
{
test: /\.scss$/,
- use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader']
+ use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader','sass-loader']
}因为要在css文件处理前加前缀，所在位置一定要放正确哟。此时运行会发现报了如下错误
Error: No PostCSS Config found我们需要一个配置文件postcss.config.js,该文件与my.config.js文件同级，内容如下
module.exports = {
plugins: [
require('autoprefixer')
]
}安装autoprefixer
npm install --save-dev autoprefixerautoprefixer，必装插件之一。方便的写规范的css，它会为你提供非常完整的hack兼容方案的。当然这里需要了解一下的是，它的大部分兼容数据来源Can I Use，另外一个稍微需要了解的插件配置参数就是browsers，比如这样写：
module.exports = {
plugins: [
require('autoprefixer')({
browsers: 'last 2 versions'
})
]
}强烈建议将查询写入package.json（这样其他插件也能够从中获取到项目将要兼容的版本），而非配置postcss.config.js中autoprefixer的browsers参数。所以此处建议写法如下：
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}package.json 新增
"browserslist": [
"last 2 version",//每个浏览器中最新的两个版本
]browserslist为数组,还有其他参数下面简单介绍一下
> 5% or >= 5%: 全球浏览器使用率大于5%或大于等于5%
Firefox > 20: 火狐版本号大于20
ie 6-8: 选择包含ie6-8的版本再次运行就得到了我们想要的效果。下一节我们处理图片资源。
原文：https://www.cnblogs.com/xqzi/p/10718184.html