您的位置:时时app平台注册网站 > web前端 > webpack4.x打包配置

webpack4.x打包配置

2019-11-02 08:54
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"
        })
    ],

图片 1

3.npm install --save-dev webpack

4.创建文件目录

1)在根目录下创建一个 src 文件 ,用于存放编写的源码,创建一个dist文件夹用于存放打包之后的代码,用于发布,在dist目录下创建一个 index.html

2)在src/entery.js ,创建一个js的入口文件

3)执行webpack src/entery.js dist/bundle.js

5.使用webpack.config.js 配置文件进行配置

    1.entry: {}配置入口文件

    2.output: {} 出口文件,

    3.module:{rules:[]} 配置loader

    4.plugins:[]配置插件

    6.devServer: {}配置服务, 热跟新服务, 3.5版本以上的webpack 自动配置热更新,webpack-dev-server,下载,在package.json中配置

6.loader介绍

    style-loader : css 中的 url 路径处理

    css-loader:  识别标签中的 id class 属性

    file-loader:    解决打包后文件路径不一致的问题,

    url-loader:   当图片小于一个值,打包成base64的

7.压缩js代码

    1. uglify.js-webpack-plugin  插件  使用    new uglify() 这个插件不需要安装

    2. html-webpack-plugin 插件html文件的打包,需要npm install 安装这个插件

    3.extract-text-webpack-plugin  css分离的插件,需要下载

8.html文件打包

    1、

9.css分离和publicPath的使用, 在output属性中配置publicPath 路径

    图片配置loader时候options选项中配置outputPath,选项, ‘images/’

10.html文件中引入img是如何处理 

    使用html-withimg-loader 这个loader , 在rules 中进行配置 

11.less和sass的打包与分离

    less: less 需要下这两个包 less less-loader,

    sass : node-sass sass-loader, 注意 分离和css。less ,sass 三个的分离方式一样,注意sass 插件,文件后缀是 .scss

12.消除无用的 css 需要使用webpack的插件 purifycss,  需要下载 purifycss-webpack基于 purify-css,所以两个都需要下载 

    在配置文件中 ,首先引入node 的glob 模块,再引入 purifycss-webpack插件,在plugins选项中进行配置

13.打包之后的代码如何调试

    devtool :配置项,source-map 生产独立的map文件, 独立,包括行与列,就是指提示错误的时候,提示第几行第几列,打包最慢,包含内容多

                                cheap-module-source- map 只包括行的 map ,就是提示错误的时候只报第几行,独立性,单独的.map文件

                                eval-source-map 不会单独生产独立的map文件,有安全问题,一定在开发阶段,有性能稳定,包括行列

                                cheap-module-eval-source-map   ,只包括行、

    devtool: 开发调试模式,设置开发调试模式

14.babel 相关配置,下载依赖包 babel-core 核心 babel-loader , 需要转换的语法 babel-preset-es2015  babel-preset-react,

    在配置项,rules中配置需要转换的文件 如 : js/jsx 要转化, 排除node_modules(exclude属性排除),及相关的配置项,由于options{}对象中需要配置的东西比较多,故因此需要专门建一个babel的配置文件,放在根目录中  建立一个 .babelrc的文件,里面放一个json对象

    只配置es2015就是es6语法可以转化,如果是es7,es8的话需要安装 babel-preset-env, es6 es7 es8 都可以转换,所以在babel的配置文件,babelrc中,配置一个env就可以啦

15.模块化配置配置webpack.config.js文件

16,环境区分, --save-dev 安装开发依赖,在pakeage.json文件下 devDepencice中存放, --save 开发依赖, 在depanceice存放

node 指令传值 set type=dev&webpack    使用process.env.type === 'dev',

17.webpack自动打包, webpack --watch,这个指令就是可以更改文件后自动打包,但是有时候需要配置项,在webpack.config.js中,需要配置watchOptions选项

18.打包之后文件 的署名信息, 通过webpack的一个自带的插件 webpack.BannerPlugin('署名信息')

19,引入第三方库,如 jquery vue react ,需要使用webpack自带的插件  webpack.ProvidePlugin({jquery: 'jquery'}),先下载依赖包

20.集中拷贝静态资源, ,使用webpack的插件,需要单独下载, copy-webpack-plugin,  使用方法 :new copyWebpackPlugin([{

    from: __dirname '/src/public',// 拷贝的目标路径

    to: './public' // 放到的位置, 相对位置,相对于出口设置的位置,也就是 dist目录下

}])

21.设置 json文件,要是用的,就是普通文件的引入,另外,低版本的 webpack 直接webpack-dev-server 命令不会自动刷新的话,需要设置一个webpack的插件 webpack.HotModuleReplacementPlugin()

22.webpack优化小技巧(黑技能)

a.引入第三方库的时候,不要在js文件中引用 ,在配置文件中配置 webpack.provideplugin(),好处:js文件中使用了第三方库才会打包第三方库,不使用的情况,不会给打包 

b.抽离入口文件,公共文件 new webpack.optimize.CommonsChunkPlugin({})

23 . webpack.js.org  

分离成功。

3.css样式与js分离

1.全局安装webpack npm install -g webpack ,   查看webpack版本号  webpack -v

图片 2

 

2.npm init -y 初始化项目,生成pageage.json 文件

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

图片 3

图片 4

<body>
    <div id=title></div>
    <div class=box>
        <p>这里是box里面的内容</p>
    </div>
    <!-- <div class="wrap"></div> -->
    <img src=http://192.168.27.21:8080/images/3ae16dcddacdf7d99b869750401202fb.png>
<script type=text/javascript src=http://192.168.27.21:8080/index.js?2735cd9759ec100ecd6f></script></body>

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

 

最后分享一下mini-css-extract-plugin的链接,想好好去学习一下的可以点击

图片 5

 

图片 6

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

然后安装依赖

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

 

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

如果需要对里面的图片打包到images/文件夹下,就需要使用一个插件html-withimg-loader

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

 

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

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

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

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

7、总结

这时候打包出来后,在dist下会出现一个images文件夹:

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

图片 7

这样就可以了。打包之后就可以看到效果。

 

此时你也会发现,不管是stylus文件还是.css文件,都会打包到一起,生成一个文件。

npm install --save-dev stylus stylus-loader

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

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

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

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

 

相关配置如下:

文件里面的内容如下:

 

然后在module里面这样配置:

//创建.babelrc文件

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

图片 9

 

图片 10

图片在html中还有另一种写法

图片 11

 

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

 

2.进行基础配置打包

package.json

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "server": "webpack-dev-server",
    "dev": "set type=dev&webpack",
    "build": "set type=pro&webpack"
  },

webpack.config.js
if(process.env.type=="dev"){//本地环境
    var website = {
        publicPath: 'http://192.168.27.21:8080/'
    }
}else{
    var website = {
        publicPath: 'http://*****' //你的线上地址
    }
}

然后进行webpack打包,生成了如下:

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

 

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

<!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>

首先安装依赖:

在src目录下创建文件夹images,并且添加一张图片,首先以背景图片的方式引入图片

npm install --save-dev babel-loader 
npm install --save-dev @babel/core  @babel/preset-env @babel/preset-react

图片 12

 

1.创建文件目录

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

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

 

这时候打包是成功了,但是开启本地服务之后,发现图片的路径有问题。这里面就是有个坑。这个时候就需要解决静态资源的路劲问题。如下:

npm install --save-dev mini-css-extract-plugin
import './css/index.css'
document.getElementById('title').innerHTML = 'webpack demo'

5、es6语法转化babel配置

 

 

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

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

以上就是一个webpack的配置详情,基本上够用了,自己写的比较啰嗦,有些地方写的不好的,麻烦留言帮我指正,谢谢!也希望各位给我一些鼓励。不吝赐教。

//webpack.config.js

           {
                test: /.(jsx|js)$/,
                use: [
                    {
                        loader: 'babel-loader',
                    }
                ],
                exclude: /node_modules/
            }

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

图片 13

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

 

  • autoprefixer为 CSS 中的属性添加浏览器特定的前缀。先介绍一下postcss:PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。PostCSS最为常用的插件是Autoprefixer,其作用是为 CSS 中的属性添加浏览器特定的前缀。Autoprefixer 可以根据需要指定支持的浏览器类型和版本,自动添加所需的带前缀的属性声明。开发人员在编写 CSS 时只需要使用 CSS 规范中的标准属性名即可。
npm install --save-dev file-loader url-loader
module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    {loader: MiniCssExtractPlugin.loader},
                    'css-loader'
                ]
            },{
                test: /.styl$/,
                use: [
                    {loader: MiniCssExtractPlugin.loader},
                    'css-loader',
                    'postcss-loader',
                    'stylus-loader'
                ]
            }
        ]
    }
//在此说明一下:因为是要对stylus文件里面的样式添加浏览器特定的前缀,所以需要在这里面引入postcss-loader进行解析,而且这几种loader的配置顺序不能颠倒,不然会产生错误或者达不到目的。我自己就尝试了把postcss-loader放在最后,解析就会出错。也算是一种小坑。
       {
              test: /.(png|jpg|gif)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 5000,//如果小于则以base64位显示,大于这个则以图片路径显示
                            outputPath: 'images/'//让图片都打包到images文件夹下
                        }
                    }
                ]
            }
<body>
    <div id="title"></div>
    <div class="box">
        <p>这里是box里面的内容</p>
    </div>
    <div class="wrap"></div>
    <img src="./images/none.png" />
</body>

图片 14

 

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

 

4、图片打包。

安装好这些依赖之后,就在目录下建立以下文件,如图:

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

6、环境配置

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

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

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

webpack.config.js

let website = {
    publicPath: 'http://192.168.27.21:8080/'//这个就是本地监听服务
}

output: {
        path: path.resolve(__dirname,'dist'),
        filename: '[name].js',
        publicPath: website.publicPath//解决静态路径的问题,比如图片的路径
    },

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

图片 15

打包后生成的内容是:

npm install --save-dev html-withimg-loader

{
          test: /.(htm|html)$/i,
          use: ['html-withimg-loader']//这个插件是让html里面的图片打包到images/文件夹下
 }
  •  为html文件中引入的外部资源如scriptlink动态添加每次compile后的hash,防止引用缓存的外部文件问题
  •  可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置Nhtml-webpack-plugin可以生成N个页面入口

 

box.styl内容:

.box {
    display flex
    width 400px
    height 400px
    border 1px solid #000000
    transform rotate(45deg)
    p{
        color red
        font-size 14px
    }
}

postcss.config.js:

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

 

做好以上准备之后,该在webpack.config.js文件里面进行stylus解析配置了:

现在babel-loader的版本都8.0.0了,其他依赖配置都发生了一些改变,由以前版本的bebel-core 、babel-preset-env、babel-preset-react、babel-preset-es2015到现在的 @babel/core、@babel/preset-env、@babel/preset-es2015、@babel/preset-react

 

接着安装postcss依赖:

本文由时时app平台注册网站发布于web前端,转载请注明出处:webpack4.x打包配置

关键词: