x配置详情,webpack分离css单独打包的主意

By admin in 4858美高梅 on 2019年3月29日

非常长日子不曾开始展览webpack打包配置了,想起来都快有些忘记了,那些东西不是不时使用,唯有在新建个门类的时候使用,不用官方模板,本身去入手安排的时候,有时候觉得依然有点难度。明天就想着自个儿动手进行布局一下,不过照旧碰着坑了,折腾了一会,以往的webpack版本都4.x了,某个插件都某个改变。

  • webpack打包工具今后尤其流行,熟悉并且能够举行配置也变得特别主要。在上学和应用的进程中相遇过许多的难点,希望能够让投机记录下来,巩固团结的上学。

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

正文介绍了webpack分离css单独打包的法子,分享给大家,具体如下:

4858美高梅,明天就赶上了多个标题,打算对js里面的css实行分离。原本是把css文件引入到index.js入口文件之令月js一起装进。但是有时候也有那种要求,必要对css文件举行分离打包。这几个时候就想到extract-text-webpack-plugin那个插件,但是在运用那一个插件之后,webpack打包发生了报错:

1.创办理文件件目录

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

CHANGELOG

4858美高梅 1

先在融洽的常用盘中(我要好的连串一般都建在E盘的叁个文件夹下)创造3个文书夹,比如webpack_demo,作者用的编辑器是visual
studio
code,使用ctrl+`直接切到这几个文件目录下4858美高梅 2

3.npm install –save-dev webpack

4.创设文件目录

1)在根目录下创办贰个 src 文件
,用于存放编写的源码,成立二个dist文件夹用于存放打包之后的代码,用于发表,在dist目录下创办2个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属性中配置public帕特h 路径

    图片配置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-es二零一五  babel-preset-react,

    在配置项,rules中配备须要更换的文件 如 : js/jsx 要转账,
排除node_modules(exclude属性排除),及相关的配置项,由于options{}对象中需求配备的事物相比多,故由此供给专门建多个babel的安顿文件,放在根目录中 
建立二个 .babelrc的文件,里面放1个json对象

x配置详情,webpack分离css单独打包的主意。    只安顿es二零一六正是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的2个自带的插件
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 命令不会自动刷新的话,须求安装1个webpack的插件
webpack.HotModuleReplacementPlugin()

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

a.引入第一方库的时候,不要在js文件中引用 ,在布署文件中陈设webpack.provideplugin(),好处:js文件中央银行使了第壹方库才会卷入第③方库,不利用的景况,不会给打包 

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

23 . webpack.js.org  

2018-02-08 14:46:06

 

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

刚看了下,网上查了
webpack单独打包css,找到的篇章,本文相比较靠前,可是由于写的相比较混乱,因此重新整理一下情节,更通俗易懂一点。

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

4858美高梅 3

2018-02-01 14:45:23

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

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

鉴于那篇小说只写了什么把CSS打包成一个CSS文件,没有讲解怎样打包成八个CSS文件,经简友提点,那里添加上了
打包成多个CSS文件的法子。

设置好这几个插件之后,在webpack.config.js中运用:

4858美高梅 4

2016-05-17 11:55

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怎么着独立打包css

以往进行webpack打包,那一个打包会提示您要安装webpack-cli正视,倘诺没有设置这么些依靠打包会报错。

确立好地点的目录之后,现在就该往里面添加内容了。往index.html
、index.js里面添加一些剧情,那几个情节就看个人自由了,只假设理所当然的都足以。在那五个文件之中添加内容是为着待会进行webpack打包的时候,不至于让打包出来的东西都以空的,不然那就很为难了。然后就该举办webpack.config.js里面配备了。上面是自个儿实行的简约的布局:

零、介绍

装进之后dist文件下的目录结构:

4858美高梅 5

以下是私家项目中计算出来的局地基本知识,记录在那里,加深自身的映像,也让大家可以更便捷方便的询问webpack,并且使用它。能力所限,有不当或许难点,请辅助建议。

4858美高梅 6

4858美高梅 7

webpack 把装有的能源都真是了一个模块, CSS,Image, JS 字体文件 都以财富,
都能够打包到多个 bundle.js 文件中.

分开成功。

然则简练的进口、出口、插件、本地服务的安排。entry是进口文件,使用的是相对路径,对应到入口文件index.js,那里配置的是单入口文件。多入口的之后配置。output是包装后的公文的不二法门,使用的是相对路径。打包后的文件都在dist目录下。出口文件的名目filename使用的是[name].js,那种写法正是为了与进口的文件名称相呼应,也有另1个原因,正是多入口文件的时候,出口也对应的有多个,那样使用[name].js就不怕你是单入口依旧多入口,很有利。接下来就是地点服务的布局,host能够动用本机ip地址,也足以动用localhost,port正是团结设置的端口。这么些html-webpack-plugin插件有五个功能:

4858美高梅 8

最终分享一下mini-css-extract-plugin的链接,想好好去学学一下的能够点击

  •  为html文件中引入的外表能源如scriptlink动态拉长每一遍compile后的hash,幸免引用缓存的外表文件难点
  •  能够转移创制html入口文件,比如单页面能够生成3个html文件输入,配置Nhtml-webpack-plugin能够变动N个页面入口

webpack基本的选用非常粗大略,不过要全套都教授的话内容很多,由此那边首要教师一下
如何运用webpack单独打包css。

那是自身第③遍玩博客,希望各位多多指教,有错的地点请帮忙指正!多谢

 那么些插件有诸多的配备项,那里俺只用到了多少个,removeAttributeQuotes是还是不是去掉属性的引号,如下type
和 src属性里面包车型大巴引号就都去掉了;hash
是或不是为保有注入的静态能源添加webpack每回编写翻译发生的唯一hash值,添加hash情势如下所示

关于打包出来,怎么加hash值,怎么替换html中的引用路径,怎么上流传CND能够采用gulp来兑现。【有趣味后边在写一篇小说】

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

一、extract-text-webpack-plugin
用法

 

单身打包css,在webpack需求选拔1个插件,extract-text-webpack-plugin

 template便是当地模板的设置。上述打包之后的布局目录如下

1. 安装extract-text-webpack-plugin

4858美高梅 9

// use npm 
npm install extract-text-webpack-plugin --save-dev

// or use yarn 
yarn add extract-text-webpack-plugin

包裹后的index.html文件之中的始末如下:

2. 配置

<!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的 plugins
里面安装抽离出来的CSS文件名叫什么。

 

var Ex = require('extract-text-webpack-plugin');
// ...省略
module: {
 loaders: [{
  test: /\.less/,
  loader: Ex.extract('style-loader', 'css-loader','less-loader') // 单独打包出CSS,这里配置注意下
 }]
},
plugins: [
 new Ex("【name】.css")
]

那便是2个最为简练的webpack打包使用了。

些微详细点,能够参见这一个《extract-text-webpack-plugin
的运用及安装》

3.css样式与js分离

上边放四个实际利用例子,方便大家领略

接下去就是往里面添砖加瓦了,有了js和html文件,当然仍旧需求有css文件了。在src目录下创办叁个css文件夹,如下图:

二 、单页面应用,把JS里面包车型大巴CSS单独打包

4858美高梅 10

打包三个文本,只须要健康的在输入的js文件引用 css文件即可,
打包成多少个CSS文件,能够安装八个CSS入口,让webpack用 loader去打包。
和撤销合并单独打包js文件一律。上面有八个例子。

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

// webpack 1.x 配置  【早期使用的配置,那时候是1.x】
/*  webpack.config.js  */
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
module.exports = {
  entry: './index.js',
  output: {
   filename: 'index.js'
  },
  module: {
   loaders: [{
    test: /\.less/,
    loader: Ex.extract('style-loader', 'css-loader','less-loader') // 单独打包出CSS,这里配置注意下
   }]
  },
  plugins: [
   new Ex("【name】.css")
  ]
 }
import './css/index.css'
document.getElementById('title').innerHTML = 'webpack demo'

三 、webpack怎样打包多少个CSS文件

 

  1. 布局文件添加对应配置

对css文件实行李包裹装,必要安装一些借助,style-loader、css-loader。

上边直接提供两个形成的多入口CSS打包配置

npm install --save-dev style-loader css-loader
// webpack 3.x 的配置
var path = require('path')
var glob = require('globby') 
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// CSS入口配置
var CSS_PATH = {
 css: {
  pattern: ['./src/**/[^_]*.less', '!./src/old/**/*.less'],
  src: path.join(__dirname, 'src'),
  dst: path.resolve(__dirname, 'static/build/webpack'),
 }
}

// 遍历除所有需要打包的CSS文件路径
function getCSSEntries(config) {
 var fileList = glob.sync(config.pattern)
 return fileList.reduce(function (previous, current) {
  var filePath = path.parse(path.relative(config.src, current))
  var withoutSuffix = path.join(filePath.dir, filePath.name)
  previous[withoutSuffix] = path.resolve(__dirname, current)
  return previous
 }, {})
}

module.exports = [
 {
  devtool: 'cheap-module-eval-source-map',
  context: path.resolve(__dirname),
  entry: getCSSEntries(CSS_PATH.css),
  output: {
   path: CSS_PATH.css.dst,
   filename: '[name].css'
  },
  module: {
   rules: [
    {
     test: /\.less$/,
     use: ExtractTextPlugin.extract({
      use: ['css-loader', 'postcss-loader', 'less-loader']
     })
    }
   ]
  },
  resolve: {
   extensions: ['.less']
  },
  plugins: [
   new ExtractTextPlugin('[name].css'),
  ]
 },
// 如果还需要打包js,则可以在这里增加一个单独打包js的处理【根据自己需求来】
// {
//  entry:{},
//  output:{},
//  ... 省略
// }
]

 

也许有同学还在使用webpack1.x,所以那边在贴一下webpack1.x 的简易布署

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

// webpack 1.x 版本
// ...其他配置和webpack3.x一样
module: {
  loaders: [
    {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract("style-loader","css-loader","postcss-loader","less-loader")
    },
  ]
}
plugins: [
 new ExtractTextPlugin('[name].css'),
]
// ...其他配置和webpack3.x一样
module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },{
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    },

上述正是本文的全部内容,希望对我们的上学抱有扶助,也可望大家多多协理脚本之家。

 

你大概感兴趣的篇章:

  • 详解webpack分离css单独打包

这里的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

 

相关配置如下:

4858美高梅 11

下一场在展开包装,在dist文件夹下生成了css文件,内容如下:

4858美高梅 12

从那之后css与js分离操作成功!

 有无数的同伴肯定也有用less、sass、stylus那二种css预处理语言,在那边自身也拿里面包车型地铁一种stylus来做二个配置。顺便使用postcss

  • autoprefixer为 CSS
    中的属性添加浏览器特定的前缀。先介绍一下postcss:PostCSS
    本人是2个作用比较单纯的工具。它提供了一种办法用 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

 

安装好这几个信赖之后,就在目录下树立以下文件,如图:

4858美高梅 13

文本之中的始末如下:

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解析配置了:

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放在最后,解析就会出错。也算是一种小坑。

 

接下来开始展览webpack打包,生成了如下:

4858美高梅 14

那儿你也会意识,不管是stylus文件照旧.css文件,都会卷入到一起,生成一个文件。

四 、图片打包。

在src目录下创立文件夹images,并且添加一张图纸,首先以背景图片的章程引入图片

4858美高梅 15

然后安装依赖

npm install --save-dev file-loader url-loader

 

下一场在module里面这么安插:

       {
              test: /\.(png|jpg|gif)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 5000,//如果小于则以base64位显示,大于这个则以图片路径显示
                            outputPath: 'images/'//让图片都打包到images文件夹下
                        }
                    }
                ]
            }

 

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

4858美高梅 16

那儿打包是马到成功了,然则打开本地服务之后,发现图片的门道有标题。那当中纵使有个坑。那一个时候就必要缓解静态财富的路劲难点。如下:

webpack.config.js

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

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

 

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

<body>
    <div id="title"></div>
    <div class="box">
        <p>这里是box里面的内容</p>
    </div>
    <div class="wrap"></div>
    <img src="./images/none.png" />
</body>

 

纵然急需对内部的图形打包到images/文件夹下,就需求运用二个插件html-withimg-loader

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

{
          test: /\.(htm|html)$/i,
          use: ['html-withimg-loader']//这个插件是让html里面的图片打包到images/文件夹下
 }

 

包裹后生成的始末是:

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

 

五 、es6语法转化babel配置

近年来babel-loader的版本都8.0.0了,别的依赖配置都发出了某个变动,由以前版本的bebel-core
、babel-preset-env、babel-preset-react、babel-preset-es二零一四到明天的 @babel/core、@babel/preset-env、@babel/preset-es201⑤ 、@babel/preset-react

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

 

//webpack.config.js

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

 

//创建.babelrc文件

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

 

诸如此类就能够了。打包之后就足以见到效用。

六 、环境安插

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://*****' //你的线上地址
    }
}

 

7、总结

如上就是三个webpack的配备详情,基本上够用了,本身写的可比啰嗦,有些地点写的不好的,麻烦留言帮本身指正,多谢!也冀望各位给本身有的砥砺。不吝赐教。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有