webpack4.x配置详情金沙官网线上

很长时间没有进行webpack打包配置了,想起来都快有些忘记了,这个东西不是经常用到,只有在新建个项目的时候用到,不用官方模板,自己去动手配置的时候,有时候觉得还是有点难度。今天就想着自己动手进行配置一下,可是还是遇到坑了,折腾了一会,现在的webpack版本都4.x了,有些插件都有些改变。

  • webpack打包工具现在非常流行,熟悉并且能够进行配置也变得非常重要。在学习和使用的过程中遇到过很多的问题,希望能够让自己记录下来,巩固自己的学习。

今天就遇到了一个问题,打算对js里面的css进行分离。原本是把css文件引入到index.js入口文件里面和js一起打包。可是有时候也有这种要求,需要对css文件进行分离打包。这个时候就想到extract-text-webpack-plugin这个插件,可是在使用这个插件之后,webpack打包发生了报错:

1.创建文件目录

金沙官网线上 1

先在自己的常用盘中(我自己的项目一般都建在E盘的一个文件夹下)创建一个文件夹,比如webpack_demo,我用的编辑器是visual studio code,使用ctrl+`直接切到这个文件目录下金沙官网线上 2

 

然后在该终端输入npm init 使其生成一个package.json文件

发现原来extract-text-webpack-plugin这个插件都过时了,在webpack4.4.0版本以上的,开始用mini-css-extract-plugin这个分离css的插件了。

金沙官网线上 3

npm install --save-dev mini-css-extract-plugin

然后在webpack_demo文件夹下建立如下文件目录:

安装好这个插件之后,在webpack.config.js中使用:

金沙官网线上 4

const MiniCssExtractPlugin  = require('mini-css-extract-plugin')//css分离

module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    "css-loader"
                ]
            },
            {
                test: /.(png|jpg|gif)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 5000//如果小于则以base64位显示,大于这个则以图片路径显示
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],

2.进行基础配置打包

之后进行webpack打包,这个打包会提示你要安装webpack-cli依赖,如果没有安装这个依赖打包会报错。

建立好上面的目录之后,现在就该往里面添加内容了。往index.html 、index.js里面添加一些内容,这些内容就看个人随意了,只要是合理的都可以。在这两个文件里面添加内容是为了待会进行webpack打包的时候,不至于让打包出来的东西都是空的,不然这就很尴尬了。然后就该进行webpack.config.js里面配置了。下面是我进行的简单的配置:

打包之后dist文件下的目录结构:

金沙官网线上 5

金沙官网线上 6

金沙官网线上 7

分离成功。

最为简单的入口、出口、插件、本地服务的配置。entry是入口文件,使用的是相对路径,对应到入口文件index.js,这里配置的是单入口文件。多入口的以后配置。output是打包后的文件的路径,使用的是绝对路径。打包后的文件都在dist目录下。出口文件的名称filename使用的是[name].js,这种写法就是为了与入口的文件名称相对应,也有另一个原因,就是多入口文件的时候,出口也相应的有多个,这样使用[name].js就不怕你是单入口还是多入口,很方便。接下来就是本地服务的配置,host可以使用本机ip地址,也可以使用localhost,port就是自己设置的端口。这个html-webpack-plugin插件有两个作用:

最后分享一下mini-css-extract-plugin的链接,想好好去学习一下的可以点击https://www.npmjs.com/package/mini-css-extract-plugin进行查看。

  •  为html文件中引入的外部资源如scriptlink动态添加每次compile后的hash,防止引用缓存的外部文件问题
  •  可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置Nhtml-webpack-plugin可以生成N个页面入口

这是我第一次玩博客,希望各位多多指教,有错的地方请帮忙指正!谢谢

 这个插件有很多的配置项,这里我只用到了三个,removeAttributeQuotes是否去掉属性的引号,如下type 和 src属性里面的引号就都去掉了;hash 是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值,添加hash形式如下所示

<script type=text/javascript src=index.js?772a5c2dd58541f56576></script></body>

 

 template就是本地模板的设置。上述打包之后的结构目录如下

金沙官网线上 8

打包后的index.html文件里面的内容如下:

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=UTF-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <meta http-equiv=X-UA-Compatible content="ie=edge">
    <title>webpack_demo</title>
</head>
<body>
    <div id=title></div>
  <script type=text/javascript src=index.js?772a5c2dd58541f56576></script></body>
</html>

 

这就是一个最为简单的webpack打包使用了。

3.css样式与js分离

接下来就是往里面添砖加瓦了,有了js和html文件,当然还是需要有css文件了。在src目录下创建一个css文件夹,如下图:

金沙官网线上 9

在入口文件index.js里面引入index.css

import './css/index.css'
document.getElementById('title').innerHTML = 'webpack demo'

 

对css文件进行打包,需要安装一些依赖,style-loader、css-loader。

npm install --save-dev style-loader css-loader

 

然后在webpack.config.js中加入module配置:

module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },{
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    },

金沙官网线上, 

这里的use有几种配置方法,你也可以根据自己的喜好写,比如 use:['style-loader','css-loader']

然后进行打包,这个时候css打包在index.js文件中,如果要把css文件从js文件中分离出来,这个时候就需要用到mini-css-extract-plugin,这个插件需要webpack版本在4.4.0以上,以前是extract-text-webpack-plugin这个插件。

npm install --save-dev mini-css-extract-plugin

 

相关配置如下:

金沙官网线上 10

然后在进行打包,在dist文件夹下生成了css文件,内容如下:

金沙官网线上 11

至此css与js分离操作成功!

 有不少的小伙伴肯定也有用less、sass、stylus这三种css预处理语言,在这里我也拿其中的一种stylus来做一个配置。顺便使用postcss

  • autoprefixer为 CSS 中的属性添加浏览器特定的前缀。先介绍一下postcss:PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。PostCSS最为常用的插件是Autoprefixer,其作用是为 CSS 中的属性添加浏览器特定的前缀。Autoprefixer 可以根据需要指定支持的浏览器类型和版本,自动添加所需的带前缀的属性声明。开发人员在编写 CSS 时只需要使用 CSS 规范中的标准属性名即可。

首先安装依赖:

npm install --save-dev stylus stylus-loader

 

接着安装postcss依赖:

npm install --save-dev postcss postcss-loader autoprefixer

本文由金沙官网线上发布于Web前端,转载请注明出处:webpack4.x配置详情金沙官网线上

您可能还会对下面的文章感兴趣: