webpack4配置(3)-打包css/js/图片等资源

时间  2019-11-06
标签 webpack4 webpack 配置 打包 css 图片 资源 栏目 CSS 繁體版
原文   原文链接

打包css资源

使用loader

webpack可使用各类不一样loader来预处理不一样格式的资源。css

  1. 在项目目录下添加文件：

编写测试代码 

// src/index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <div class="box"></div>
</body>
</html>
复制代码
// src/css/style.css
.box{
    width:50px;
    height: 50px;
    background-color: pink;
}
复制代码
  1. 安装css-loader和style-loader
    css-loader负责读取css文件，而后使用style-loader将css内容注入到js里面去，最终是以style标签的形式嵌入到Html代码中
    npm i -D css-loader style-loader
  2. 更改配置文件
module:
{
    test: /\.css$/,
    use: [
        {
            loader:'style-loader',  //以style标签的形式嵌入到html中
            options:{  
                insertAt:top   //嵌入位置，top指顶部，不会覆盖掉html自带的style样式
            }
        }
        'css-loader'  //解析css文件
    ]
},
复制代码

module使用方法：html

  • rules:一个数组，存放各类Loader
  • test:正则表达式，用来匹配不一样的文件名后缀
  • loader:有多种使用方法
{
    test:/\.js$/,
    loader:'babel-loader'  //只有一个loader时
}
{
    test:/\.css$/,
    use:['style-loader','css-loader']  //多个loader,从右往左加载
}
{
    test:/\.css$/,
    use:[ 
        'style-loader',          //多个loader混合使用
        {                           //loader要设置相关参数时可使用对象
            loader:'css-loader',
            options:{
                minimize:true
            }
        }
    ]
}
复制代码

使用插件MiniCssExtractPlugin

使用css-loader+style-loader的方式是将样式打包进js文件，而后以style标签的形式嵌入页面。css样式与js文件混在一块儿可能致使一些样式混乱，因此使用插件将css样式统一打包进一个css文件，而后以link标签的形式嵌入页面进行资源请求。
webpack3一般使用的是ExtractWebpackPlugin,但在webpack4中已再也不支持，官方推荐使用MiniCssExtractPlugin进行替代。
首先安装 ：
npm i -D mini-css-extract-plugin
修改配置文件webpack

const miniCssExtractPlugin=require('mini-css-extract-plugin');

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename:'bundle.js',
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    {
                        loader:miniCssExtractPlugin.loader
                    },
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new miniCssExtractPlugin({
            filename:'[name].css'   //输出的css文件名，放置在dist目录下
        }) 
    ]
}
复制代码

打开dist/index.html，能够看到以link形式引入了css样式。es6

自动添加前缀

咱们但愿能够给css自动添加浏览器前缀，可使用插件autoprefixer.web

  1. 首先安装，npm i -D postcss-loader autoprefixer
  2. postcss-loader须要一个配置文件，在根目录下新建postcss.config.js文件，写入：
module.exports={
    plugins:[require('autoprefixer')]
}
复制代码
  1. 配置loader
// webpack.config.js
{
    test: /\.css$/,
    use: [
        {
            loader:miniCssExtractPlugin.loader  //抽离成一个css文件
        },
        'css-loader',    //解析css
        'postcss-loader'   //先添加前缀
    ]
}
复制代码
  1. 编写css测试代码
// src/css/style.css
.box{
    width:50px;
    height: 50px;
    background-color: pink;
    transform: rotateX(30deg);
}
复制代码
  1. 打包npm run build后，打开dist/main.css，能够看到tranform已经加上了webkit前缀。

压缩css/js代码

使用optimize-css-assets-webpack-plugin插件来压缩css代码。正则表达式

  1. 安装 npm i -D optimize-css-assets-webpack-plugin
  2. 修改配置文件
// webpack.config.js

const opimizeCss=require('optimize-css-assets-webpack-plugin');

module.exports = {
    optimization:{   
        minimizer:[
            new opimizeCss()
        ]   
    },
    mode:'production'
    ....
}    
复制代码
  1. npm run build之后打开main.css发现已经被压缩，可是在默认环境为production时自动压缩的js代码却再也不压缩了，咱们使用uglifyjs-webpack-plugin来压缩js代码。
  2. 安装 npm i -D uglifyjs-webpack-plugin
  3. 修改配置文件
//webpack.config.js
const uglifyJsWebpackPlugin=require('uglifyjs-webpack-plugin')

module.exports = {
    optimization:{   
        minimizer:[
            new uglifyJsWebpackPlugin({
                cache:true,  //是否缓存
                parallel:true,  //是否并发打包，同时打包多个文件
                sourceMap:true  //打包后的代码与源码的映射，方便调试
            })
            ...
        ]
        ...
}        
复制代码

es6转es5

webpack里面使用了大量的es6语法，咱们须要转换为es5,使用babel来完成此功能。npm

  1. 安装babel npm i -D babel-loader @babel/core @babel/preset-env
  2. 配置loader
{
    test:/\.js$/,
    use:[
        {
            loader:'babel-loader',
            options:{
                presets:[
                    `@babel/preset-env`  //es6转es5
                ]
            }
        }
    ]
}
复制代码

打包图片资源

在js中建立图片引入

(1)引入的图片须要在入口的js文件中import进去数组

// index.js

import img from './img/big.jpg';  //file-loader将该图片放入到dist下，同时返回图片的地址
var imgElement = document.createElement('img');
imgElement.src = img;
document.body.appendChild(imgElement);
复制代码

(2)安装file-loader并配置 npm i -D file-loader浏览器

// webpack.config.js

{
    test: /\.(png|jpg|gif|svg|jpeg)$/,
    loader: 'file-loader',
}
复制代码

在css中中引入背景图片

与js引入图片用法相同，不过比起file-loader，更经常使用的是url-loader,能够将小图片直接base64编码，减小http请求。 (1)安装url-loader并配置 npm i -D url-loader缓存

// webpack.config.js

{
    test: /\.(png|jpg|jpeg|gif|svg)$/,
    loader: 'url-loader',
    options: {
        limit: 1024,  //小于该值的图片会使用base64编码
        name: '[name].[hash:8].[ext]'  //打包后的图片名称 [ext]指图片格式
    }
}
复制代码

直接在html写入标签

// src/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <div class="box"></div>
    <img src="./img/big.png">
</body>
</html>
复制代码

打包后发现该图片的地址是写死的，并不会相对于dist，致使没法找到该图片，使用html-withimg-loader来处理html中的图片。
安装并配置 npm i -D html-withimg-loader

// webpack.config.js
{
    test:/\.html$/,
    loader:'html-withimg-loader'
}
复制代码

再次打包运行后发现能够正确加载图片了。

配置不一样的资源路径

如今这种配置下，全部的资源都放置在dist目录下，看起来很混乱，咱们但愿js在js文件夹下，css在css文件夹下，图片在img文件夹下，修改相关配置。

//webpack.config.js

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename:'js/bundle.js', //给打包输出的js添加一层目录
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    {
                        loader:miniCssExtractPlugin.loader
                    },
                    'css-loader',
                    'postcss-loader'  
                ]
            },
            {
                test:/\.js$/,  //最后会打包进输出的js的文件，因此不须要配置路径
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:[
                                `@babel/preset-env`
                            ]
                        },
                    }
                ]
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: '[name].[hash:8].[ext]',
                    //不能经过名字添加路径，由于背景图片还会被css处理一次，会再添加上css的路径
                    //最后就会变成 css/img/big.1763821.png
                    outputPath:'img/',  //经过该属性设置，打包输出的路径多一层
                    publicPath:'http://cdn.com'  //图片的访问路径为 http://cdn.com/img/big.561361.png
                },
                
            },
            {
                test:/\.html$/,
                loader:'html-withimg-loader',  //会加上url-loader里的outputPath
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new miniCssExtractPlugin({
            filename:'css/[name].css'  //经过名字添加一层路径
        }),
        new cleanWebpackPlugin()
    ]
}
复制代码

最终npm run build后，就能够有不一样的文件夹，同时index.html也正确处理了路径。

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