精华内容
下载资源
问答
  • 本篇教程介绍了HTML+CSS入门 webpack配置:CSS文件打包,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。<1、在src下新建css文件,在css文件下新建index.css文件,输入以下代码body{color:red;font-...

    本篇教程介绍了HTML+CSS入门 webpack配置:CSS文件打包,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

    <

    1、在src下新建css文件,在css文件下新建index.css文件,输入以下代码

    body{

    color:red;

    font-size:20px;

    }

    2、css建立好后,需要引入到入口文件,这里我们引入到index.js中

    import css from ‘./css/index.css‘;

    document.write("It works.");

    3、在终端安装style-loader和css-loader

    4、安装好后,我们开始在webpack.config.js中配置module选项

    //模块:例如解读CSS,图片如何转换,压缩

    module:{

    rules:[

    {

    test:/\.css$/,

    use:[‘style-loader‘,‘css-loader‘]

    }

    ]

    },

    5、在终端输入 npm run server,可以看到出来的效果有了样式。

    本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!

    展开全文
  • 首先要安装css的loadernpm install css-loader style-loader --save-dev然后在webpack.config.js中配置如下代码意思是先用css-loader加载css文件,再用style-loader添加在页面中在app目录下创建component.css文件...

    首先要安装css的loader

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

    然后在webpack.config.js中配置如下代码

    意思是先用css-loader加载css文件,再用style-loader添加在页面中

    在app目录下创建component.css文件

    body{

    background-color: red;

    }

    在app/index.js中引入css文件

    运行npm run start命令。

    可以看到我们浏览器整个背景都变成了红色。

    webpack做了什么呢?

    看到build/app.js中有如下代码。

    再看下我们生产的index.html文件

    奇怪了,并没有内敛样式也没有引入的css文件,那浏览器是为什么变红的呢?

    我们在浏览器中打开调试工具。

    原来样式在这!

    webpack动态的添加了内敛样式在代码中。

    如果多人协作开发的情况下,会有很大可能出现代码命名重复的情况,如果出现这种情况怎么办呢?

    来让我们试验一下。

    在app目录下添加两个css文件,style1.css

    body{

    background-color: red;

    }

    .class1{

    color: green;

    }

    和style2.css

    body{

    background-color: black;

    }

    .class1{

    color: blue;

    }

    在index.js中引入这两个文件

    修改component.js文件,使其给元素添加传入的类名

    在webpack.config.js中添加如下配置

    我们执行npm run start 命令若看到

    即为打包成功。

    可以看到同样的类名都正常显示出来了,看下右边的文档结构,发现我们的类名不是class1了。

    原来CSS Modules对我们的类名做了哈希处理,我们再也不用担心同事跟我们有相同的命名了。

    是不是很方便呢?

    让我们再来面对另一个问题,现在这种情况下css是js动态添加上去的,如果当js文件有一个长时间的阻塞事件,页面将会处于长时间的无样式的状态。

    这是我们不希望看到的,怎么把css文件和js文件分离呢?

    首先我们需要安装一个插件

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

    安装成功之后在webpack.config.js中添加如下配置

    完成之后运行一下npm run start

    可以看到我们两个css文件合并为一个app.css文件并以外部样式表的形式加载。

    而且css文件比js文件要先请求,这样就避免页面会出现FOUC-Flas Of Unstyle Content无样式内容闪烁。

    webpack关于css的加载就讲到这里。

    展开全文
  • 现在做前端开发用 webpack 很多,之前有深入研究过,并且做了很多相关笔记。一直想着整理出来,刚好同事这两天有问到我 webpack 相关的问题,趁着这个机会我自己也好好梳理一下。准备写 webpack 的系列文章,从基础...

    现在做前端开发用 webpack 很多,之前有深入研究过,并且做了很多相关笔记。一直想着整理出来,刚好同事这两天有问到我 webpack 相关的问题,趁着这个机会我自己也好好梳理一下。

    准备写 webpack 的系列文章,从基础、优化到原理。

    最基本使用

    安装 webpack 依赖:

    npm install webpack@4 webpack-cli@3 -D

    注意: 由于我们公司当前所有项目都未升级到 webpack5.x,所以这系列文章基于 webpack4.x 来写,后续单独写 webpack5.x 相关的。

    创建 webpack.config.js

    如果不创建 webpack.config.js,webpack 会使用默认的配置的文件,但是默认的配置文件功能很弱,这里就不再讲了。项目开发过程中都会自己写配置文件。

    配置文件的名字也可以不叫 webpack.config.js,只需要在执行 webpack 命令的时候声明即可:

    npx webpack --config 你自己的定义的文件名

    注意:正常情况下,我们都不会去改配置文件的名称。

    entry、output

    在项目目录下建一个 src 目录,在 src 目录下创建 index.js、test1.js

    test1.js

    exports.name = 'iceman';

    index.js

    const test1 = require('./test1');console.log(test1.name);

    写 webpack.config.js 中的配置的时候需要知道 webpacknode 写出来的,所以要遵循 node 的语法。

    module.exports = {  entry: './src/index.js',  output: {    filename: 'main.js',    path: path.resolve(__dirname, 'dist'),  }}

    entry 为入口文件。

    output 为输出的配置:

    • filename:打包后的文件名,可以给 filename 加上 hash ,每次打包后的文件名就不一样了,可以防止缓存。filename: 'main.[hash].js',如果觉得 hash 太长,可以设置长度 filename: 'main.[hash:8].js'
    • path:打包后的文件的输出路径,这里的路径必须是一个绝对路径,可以使用 nodepath 模块中的 resolve 生成绝对路径。

    mode

    做完以上配置之后,输入打包命令:

    npx webpack

    能打包,但是输出警告信息:

    8314b82b276251007bc0165188c572fa.png

    这段警告告诉我们没有设置 modewebpack 会默认使用 production。mode 的设置可以在控制台输入打包命令的时候添加:

    npx webpack --mode=production

    也可以在配置文件中指定:

    6a0cb6a4760c35bec53029307c2ad800.png

    注意:这里只是演示,一般不会直接写死 “production” 、“development”,都是通过控制台输入打包命令的时候设置变量,然后动态判断。

    #plugins

    我们现在将一个 HTML 文件也打包进 dist 文件中,作为我们项目的入口 HTML。

    在这个 HTML 中还要将 dist 中的 JavaScript 入口文件引进去,这个操作肯定不可能每次都手动的操作。

    这时候就要用到 plugins 了,plugins 是个数组,里面放所有的 webpack 插件。拷贝 HTML 可以用 html-webpack-plugin 插件。

    plugins: [  new HtmlWebpackPlugin({    template: './src/index.html',    filename: 'index.html'  }),]

    这个插件中的 templatefilename 这两个参数很好理解,就是需要拷贝的模板和输出的文件名。输出到 dist 中的 HTML 如下:

    125992962e3e6e521b7de698f9f1d28f.png

    输出的 HTML 文件中,已经自动引入了入口 JavaScript 文件。

    该插件还有其他几个参数:

    new HtmlWebpackPlugin({  template: "./src/index.html",  filename: "index.html",  minify: {    removeAttributeQuotes: true,    collapseWhitespace: true,  },  hash: true})
    • minify#removeAttributeQuotes:去除 HTML 中的引号
    • minify#collapseWhitespace:将空行压缩
    • hash:引入 JavaScript 文件加上随机的 url 参数

    module

    到现在为止,已经将 HTML、JavaScript 都打包了。如果这时候要引入样式文件呢?

    如果要打包样式,需要用到样式相关的 loaderloader 写在 modulerules 中。

    安装 css-loaderstyle-loader

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

    loader 的执行顺序是 从右向左

    css-loader 的作用是解析 @import 这样的语法,style-loader 的作用是把 css 插入到 head 标签中。

    从这里也可以看出,loader 的设计理念是功能单一,一个 loader 只做一件事,然后组合做个 loader。

    loader 的写法除了上面的字符串的形式,还可以写成对象的形式,用对象的形式有一个好处就是可以给 loader 加参数:

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

    在 src 下写一个样式文件 test02.css:

    body {  background-color: #ddd;}

    index.js 中引入:

    require('./test02.css');

    以上的操作之后,就可以打包 css 文件了。如果要打包 Less,也是一样的思路,加上相应的 loader 即可:

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

    webpack-dev-server

    平时开发过程中,修改了某个 JavaScript 文件,或者某个 css 文件,如果每次都要手动打包一次,然后再手动打开 index.html,那么效率相当低。这一点 webpack 也考虑到了,提供了 webpack-dev-server 给我们使用。

    npm install webpack-dev-server

    在配置文件中加入相关配置:

    devServer: {  port: 8080,  // 显示进度条  progress: true,  // 根目录  contentBase: './dist',  // 是否开启 gzip 压缩  compress: true}

    样式处理

    走完一遍 最基本的使用 之后,对 webpack 已经不那么陌生了。接下来我们继续学习使用 webpack

    在上面讲解 module 的时候,有介绍到样式的处理,介绍了 style-loadercss-loaderless-loader,有了这三个插件,已经能正常的处理样式了。不过还不够,对于样式的处理,还有一些细节。

    样式抽取为单独的文件

    现在所有的样式都是直接插入到 中。

    1b7b823273b95b0f0ca3e1a6c0b94717.png

    可以使用 mini-css-extract-plugin 来抽取样式。

    webpack.config.js

    const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {  plugins: [    new MiniCssExtractPlugin({      filename: 'main.css',    }),  ],}

    除了在 plugins 中添加相应的插件之外。还需要将 modulerules 中和样式相关的 style-loader 换成 MiniCssExtractPlugin.loader

    cd7146f1c2884117d99c4a8b688a8e34.png

    自动补齐 CSS3 属性前缀

    安装依赖:

    npm i postcss-loader autoprefixer@8 -D

    注意:在使用中控制台报错,Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin,提示我们要使用8.x的版本。

    970ef38e9dec4cd772d3e71aadfb9816.png

    postcss-loader 必须放在 css-loader 之前。

    根目录下新建 postcss.config.js

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

    压缩 CSS 文件

    安装依赖:

    npm i optimize-css-assets-webpack-plugin -D

    在配置文件中新加 optimization ,就是优化项的意思。

    optimization: {    minimizer: [      new OptimizeCssAssetsPlugin(),    ]}

    做完以上配置之后,css 文件就会压缩。

    既然 CSS 文件可以压缩了,那么 JS 文件是不是也可以压缩呢?

    安装依赖:

    npm i uglifyjs-webpack-plugin -D
    optimization: {  minimizer: [    new UglifyJsPlugin({      cache: true,      parallel: true,      sourceMap: true,    }),  ]}

    参数的具体含义以及其他参数可查看文档:https://www.npmjs.com/package/uglifyjs-webpack-plugin。

    注意:以上压缩的配置一定是在 mode: 'production' 的情况生效的,在 development 的情况下不会生效。

    ES6+

    编译 ES6

    const fn = () => {  console.log('aa');}fn();

    这段箭头函数的代码,默认情况下是不会被编译的。需要用 babel

    安装依赖

    npm i babel-loader @babel/core @babel/preset-env  -D
    module: {  rules: [    {      test: /.js$/,      use: {        loader: 'babel-loader',        options: {          presets: [            '@babel/preset-env',          ],        },      },    }  ]}

    编译 decorator

    以上的配置无法编译 decorator,需要加额外配置。

    function Controller(target) {  console.log(target);}@Controllerclass A {  }
    npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D
    module: {  rules: [    {      test: /.js$/,      use: {        loader: 'babel-loader',        options: {          presets: [            '@babel/preset-env',          ],          "plugins": [             ["@babel/plugin-proposal-decorators", { "legacy": true }],             ["@babel/plugin-proposal-class-properties", { "loose" : true }]          ]        },      },    }  ]}

    打包图片

    图片一般会以是那种情况出现:

    • JS 代码中直接使用
    • CSS 中引入
    • img 标签中使用

    JS、CSS 中使用

    安装依赖

    npm install file-loader@3 -D

    配置文件:

    module: {  rules: [    {      test: /.(png|jpg|gif)&/,      use: {        loader: 'file-loader',      }    }  ]}

    JS 中使用:

    import st from './st.jpg';const img = new Image();img.src = st;document.body.appendChild(img);

    CSS中使用:

    body {  background-image: url("./st.jpg");}

    注意这里的如果 file-loader 用的不是 3.x 版本的话,编译出来的 css 文件会有问题:

    12ed949add58ce78954dda3d902c1606.png

    以上两种方式都是使用的 file-loaderfile-loader 的机制是在内部生成一张图片,到build目录下,再把生成的图片的名字返回回来。

    还有一个 url-loader,它会将图片 BASE64 编码:

    {  test: /.(png|jpg|gif)$/,  use: {    loader: 'url-loader',    options: {      limit: 10 * 1024,      outputPath: '/img/',    }  }}

    outputPath 为图片的输出路径。

    当图片小于 limit 的时候会把图片 BASE64 编码,大于 limit 参数的时候还是使用 file-loader 进行拷贝。

    注意:BASE64 编码之后,图片的体积会变大三分之一左右,所以对于较大得图片不要用 url-loader,在 options 中设置 limit。

    img 标签中使用

    在 img 标签中使用图片,需要 html-withimg-loader

    安装依赖

    npm i html-withimg-loader -D

    配置文件

    {  test: /.html$/,  use: 'html-withimg-loader'}
    展开全文
  • 在打包css之前,需要知道module有什么作用,还有...所有的Loaders都需要在npm中单独进行安装,并在webpack.config.js里进行配置。test:匹配处理文件的扩展名的正则表达式use:loader名称,就是你要使用模块的名称i...

    在打包css之前,需要知道module有什么作用,还有loader。

    module 主要是用来配置不同的加载器,而加载器是用于不同的文件。

    loader 主要用于将不同的文件都转换成js文件,如css,ES6等。

    所有的Loaders都需要在npm中单独进行安装,并在webpack.config.js里进行配置。

    test:匹配处理文件的扩展名的正则表达式

    use:loader名称,就是你要使用模块的名称

    include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹

    query:为loaders提供额外的设置选项

    打包css文件

    建立index.css文件

    src/css/index.css

    body{

    background-color: red;

    color: white;

    }

    CSS文件建立好后,需要引入到入口文件中,才可以打包到,这里我们引入到entry.js中。

    /src/entery.js中在首行加入代码:

    import './css/index.css';

    配置loader

    解析css的loader需要style-loader和css-loader

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

    style-loader:用于处理css中url等

    css-loader: 用于将css插入到页面的style标签

    module属性中的配置

    module: {

    rules: [

    {

    test: /\.css$/,

    use: ['style-loader','css-loader'],

    include: path.join(__dirname,'./src'),

    exclude: /node_modules/

    }

    ]

    }

    注意顺序很重要,即先用style-loader解析,然用css-loader添加到style标签中

    配置js压缩

    js压缩就需要用到plugins

    webpack4.x的production模式默认压缩,不需要配置。

    其他版本

    webpack默认集成uglifyjs-webpack-plugin,所以只需要引入就好了。

    const uglify = require('uglifyjs-webpack-plugin');

    在插件配置中添加

    plugins:[

    new uglify()

    ],

    只能在生产环境中使用,开发环境会报错

    自动发布html

    前面的index.html是手动添加,需要自动生成,添加资源。

    npm install --save-dev html-webpack-plugin

    在配置文件中

    const htmlPlugin= require('html-webpack-plugin');

    plugins: [

    new HtmlWebpackPlugin({

    template: './src/index.html', // 指定产出的模板

    filename: 'base.html', // 产出的文件名

    chunks: ['entry1','entry2'], // 在产出的HTML文件里引入哪些代码块

    hash: true, // 名称是否哈希值

    title: 'base', // 可以给模板设置变量名,在html模板中调用 htmlWebpackPlugin.options.title 可以使用

    minify: { // 对html文件进行压缩

    removeAttributeQuotes: true // 移除双引号

    }

    })

    ]

    展开全文
  • 先上webpack.dev.config.js的配置文件var ExtractTextPlugin = require("extract-text-webpack-plugin");var HtmlWebpackPlugin = require('html-webpack-plugin');var webpack = require('webpack');var path = ...
  • 为什么去处理html文件我们所有的方法都打包到了dist的文件夹下面,而我们的html是在自己定义的文件夹下面,如果...HtmlWebpackPlugin第一步:下载npminstall--save-devextract-text-webpack-plugin第二步:webpack.c...
  • 创建一个文件夹,取名为 usewebpackwebpack的安装(在安装webpack之前可以先使用npm init 初始化一下你的项目,会生成package.json说明文件)1.全局安装webpack (--save-dv 表示安装的是开发时依赖) npm install ...
  • 本篇教程介绍了HTML+CSS入门 HtmlWebpackPlugin的使用以及webpack热更新详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。<下面是案例目录:wepack.config.js部分选项;说一说webpack-html-plugin的...
  • postcss webpack3.0配置

    千次阅读 2017-11-06 09:58:59
    webpack.base.conf.js中如下配置: { test: /.less/, use: [ {loader: ‘style-loader’}, { loader: ‘css-loader’, options: { sourceMap:
  • 1、安装webpack4npm i webpack@4.44.2 webpack-cli@4.0.0 -D默认安装完成后只有一个node_modules目录和package.json文件。-S和-D参数的区别:npm i xxx -S 等同于:npm install xxx --save //写入package.json的...
  • 使用html-webpack-plugin,处理静态资源,消除缓存,在webpack.config.js设置了hash:true,但是没有效果,我的webconfig配置如下var HtmlWebpackPlugin = require('html-webpack-plugin')var ExtractTextPlugin = ...
  • webpack-postcss webpack-postcss
  • wpcss:webpack css代码抽离后处理压缩
  • CSSwebpack

    2020-02-20 16:42:57
    webpack JS是整个应用的核心入口 一起资源均由JS管理依赖 一切资源均有webpack打包发布 npm install webpack webpack-cli --save-dev 安装
  • webpack react 单独打包 CSS webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件 操作步骤: step1: 安装 webpack plugin 插件 npm install extract-text-...
  • webapck4.x中废弃了extract-text-webpack-plugin,说建议使用mini-css-webpack-plugin,当我在使用这个的时候发现这里面不能单独修改css文件的中引用图片的publicPath属性,然后打包后css文件中的url指向就出现了问题,...
  • 该插件将提取关键CSS并在所有文件发出后运行,因此您可以在Mini CSS Extract插件和HTML Webpack插件之后使用它。 查看或阅读博客文章以获取更多用法信息。 安装 npm i --save-dev html-critical-webpack-plugin ...
  • CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W3C推出了第一个正式版本。随后不到两年的时间,1998年5月便推出了第二个版本,一直沿用至今。但是CSS3的制订工作却迟迟没有完成。CSS3最初的草案...
  • css工程化 目的:让项目更好的运转 组织 优化 构建 维护 PostCSS PostCSS本身只有解析能力 其他的属性全依赖于插件 目前有200多个插件 PostCSS常用插件 postcss-import(atImport) 模块合并 autoprefixier ...
  • webpack加载css

    2017-09-30 14:37:21
    webpack加载css
  • webpack拆分css

    2020-08-26 20:06:53
    利用webpack拆分css {ignore}1.css-loader2.style-loader 1.利用webpack拆分css {ignore} 要拆分css,就必须把css当成像js那样的模块;要把css当成模块,就必须有一个构建工具(webpack),它具备合并代码的能力 而...
  • CSS Modules In Webpack

    2019-10-01 16:35:03
    1)从形式上看,CSS Modules 是将CSS中的选择器转换为变量,然后在DOM中引用变量来引入样式。...3)在Webpack中使用,需要为css-loader增加modules // webpack 1.x { test: /\.css$/, ...
  • webpack抽取css

    2019-11-21 17:51:05
    webpack4之前的版本使用ExtractTextPlugin方法提取css, 安装cnpm install extract-text-webpack-plugin -D webpack4和webpack4.x上使用ExtractTextPlugin的话,会报下面的错误DeprecationWarning: Tapable.plugin is...
  • webpack打包css

    2019-03-31 12:24:04
    注意:写这个笔记的时候webpack版本是: $ webpack -v 4.29.6 本地安装webpack npm init -y npm install webpack webpack-cli --save-dev ...要捆绑lodash依赖项index.js,需本地...css配置 npm install --save...
  • reset-css:Eric MeyerCSS重置的未修改*副本。 PostCSSwebpack,Sass和不太友好
  • 1、使用webpack安装css插件: npm install css-loader style-loader --save-dev 查看package.json,已经发现插件安装成功了。 2、在 webpack.config.js中配置css module: { loaders: [ {test: /\.css$/...
  • webpack-css

    2020-01-16 10:08:53
    npm+webpack是本篇的基础,本篇需要的两个模块是 lodash style-loader css-loader,使用命令如下。 2.环境准备和命令 npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli npm ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,883
精华内容 7,553
关键字:

csswebpack