来自 澳门金莎娱乐手机版 2019-12-23 06:55 的文章
当前位置: 金沙澳门官网网址 > 澳门金莎娱乐手机版 > 正文

webpack 处理CSS,webpack处理css

webpack 处理CSS,webpack处理css

1、安装插件

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

style-loader插件为:通过注入<style>标签将CSS添加到DOM中

autoprefixer 自动添加前缀

postcss-import:支持使用@import引入css

2、项目目录结构:

common.css为:

@import './flex.css';
html,body{
    padding: 0;
    margin: 0;
    background-color: red;
}
ul{
    list-style: none;
    margin: 0;
}

flex.css为:

.flex-div{
    display: flex;
}

app.js为:

import  './css/common.css';
import layer from './components/layer/layer.js'
const App = function(){
    console.log(layer)
}

new App()

3、webpack.config.js配置文件为:

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/app.js',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].js'
    },
    module: {
        loaders: [{
                test: /.js$/,
                //以下目录不处理
                exclude: /node_modules/,
                //只处理以下目录
                include: /src/,
                loader: "babel-loader",
                //配置的目标运行环境(environment)自动启用需要的 babel 插件
                query: {
                    presets: ['latest']
                }
            },
            //css 处理这一块
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            //支持@important引入css
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function() {
                                return [
                                    //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
                                    require('postcss-import')(),
                                    require("autoprefixer")({
                                        "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
                                    })
                                ]
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html'
        })
    ]
}

4、施行编写翻译&查看结果

npm run webpack

图片 1

 

 

 

管理CSS,webpack管理css 1、安装插件 npm i style-loader css-loader --save- devnpm i postcss -loader --save- devnpm i autoprefixer --save- devnpm install postcss -i...

Loaders

Loaders是Webpack最关键的法力之风姿浪漫,他也是Webpack如此盛行的缘故。通过选取不一致的Loader,Webpack能够的剧本和工具,进而对两样的文件格式实行一定管理。

Loader的安顿模型:

  • test:用于匹配管理公事的扩充名的表明式,那么些选项是必得进行安插的;
  • use:loader名称,正是您要运用模块的称呼,那个选项也必需实行布置,否则报错;
  • include/exclude:手动增多必得管理的文件(文件夹)或屏蔽无需管理的文书(文件夹)(可选);
  • query:为loaders提供额外的装置选项(可选)。

打包CSS

先是,在src目录下创建css文件夹,和index.css文件,并编写制定如下代码:

body{
    background: burlywood;
    color:white;
    font-size:30px;
}

建构好后,要求引进到进口文件中,才得以打包。在entery.js的首行出席代码:

import css from './css/index.css';

接下去大家就供给深入分析css文件,通过loader,下边到大家下载style-loader和css-loader:

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

配置loader:

先是种方法:

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

其次种艺术:

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

其二种情势:

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

如此那般大家就配备好了,使用命令webpack打包,就能够看的体制生效;

分离CSS

脚下,打包后的文本中,css是包装在js代码里面包车型客车,那样不便利以往的保证,所以必要吧CSS从js中抽离出来,我们需求接收插件Extract Text Plugin

安装:

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

在webpack.config.js中引入

const ExtractTextPlugin = require('extract-text-webpack-plugin');

在Plugins中配置:

new ExtractTextPlugin('css/index.css');
//css/index.css是分离后的路径位置

修改Loader配置:

module:{
    rules:[
        {
            test:/.css$/,
            use:ExtractTextPlugin.extract({
                fallback:"style-loader",
                use:"css-loader"
            })
        }
    ]
}

Less打包和分手

Less作为当下非常红的CSS预管理语言,它扩充了 CSS 语言,扩充了变量、Mixin、函数等风味,使 CSS 更易维护和扩张;

安装:

npm install --save-dev less less-loader

在webpack.config.js中配置Loader:

module:{
    rules:[
        {
            test:/.less$/,
            use:ExtractTextPlugin.extract({
                fallback:"style-loader",
                use:[{
                    loader:"css-loader"
                },{
                    loader:"less-loader"
                }]
            })
        }
    ]
}

本文由金沙澳门官网网址发布于澳门金莎娱乐手机版,转载请注明出处:webpack 处理CSS,webpack处理css

关键词: