webpack4(02)

时间  2019-12-10
标签 webpack4 webpack 繁體版
原文   原文链接

开发

上节的例子中，咱们使用插件自动引入了打包后的文件，每当咱们修改源文件后，咱们想查看修改后的效果都要打包，刷新浏览器，若是修改后能实时的显示效果就行了，能够尝试使用 webpack-dev-server，刚好能够实现咱们想要的功能。css

webpack-dev-server

安装html

npm install --save-dev webpack-dev-server

my.config.jsnode

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.jsonwebpack

{
    "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 带有许多可配置的选项。点击这里查看更多。css3

管理资源

加载css

首先对文件作以下修改,新增一个css文件，而后再index.js文件中引入。web

webpack-demo
    package.json
    my.config.js   
+   index.html
    /src
        index.js
+       style.css

index.htmlnpm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="hello">
            hello,qzy
        </div>
    </body>
</html>

style.cssjson

.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-loader

css-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.scss

style.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标签内，可是假如咱们想将这些样式单独抽离成一个文件，该怎么作呢？

抽离css

安装插件

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文件中了。

css3前缀

开始以前请看以下代码

//原始
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 autoprefixer

autoprefixer，必装插件之一。方便的写规范的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的版本

再次运行就获得了咱们想要的效果。下一节咱们处理图片资源。

每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程