ホームページ >ウェブフロントエンド >フロントエンドQ&A >Webpack を解析して CSS を別のファイルに抽出する例 (コードは添付されています)
この記事では、javascript に関する関連知識を提供します。主に、CSS の互換性処理や CSS 圧縮など、CSS を別のファイルに抽出する Webpack に関連する問題を紹介します。一緒に見ていきましょう。みんなの役に立つでしょう。
[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]
1. プラグインのインストールと導入
npm install mini-css-extract-plugin -D const MiniCssExtractPlugin = require('mini-css-extract-plugin')
2. プラグインの設定
plugins: [ new HtmlWebpackPlugin({ template:'./src/index.html' }), new MiniCssExtractPlugin({ filename:'css/built.css'//对输出的文件进行重命名,默认为main.css }) ],
3. ローダーファイルの変更
{ test:/.css$/, use:[ //取代css-loader,提取js中css成单独文件(注意) MiniCssExtractPlugin.loader, //将css文件整合到JS文件中 'css-loader', ] },
1. プラグインをインストールします
npm install postcss-loader postcss-preset-env -D
2. モジュールに postcss-loader を設定し、postcss-preset-env プラグインを設定します
{ test:/.css$/, use:[ //取代css-loader,提取js中css成单独文件 MiniCssExtractPlugin.loader, //将css文件整合到JS文件中 'css-loader', //css兼容性处理:postcss --> postcss-loader postcss-preset-env //帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式 { loader:'postcss-loader', options: { ident: 'postcss',//默认配置 plugins: () => [ require('postcss-preset-env')() ] } } ] },
3. package.json のブラウザリストを設定する
"browserslist":{ "development":[ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production":[ ">0.1%", "not dead", "not op_mini all" ] }
4. package.json のブラウザリストにある開発環境を有効にするには、デフォルトでは webpack.config.js で環境を設定する必要があります。
const {resolve}=require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') //设置node.js环境变量,默认是生产环境,配置后为开发环境; process.env.NODE_ENV = 'development';
1. プラグインをインストールし、参照
npm install optimize-css-assets-webpack-plugin -D const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
2. プラグインを設定するプラグイン内
plugins: [ new HtmlWebpackPlugin({ template:'./src/index.html' }), new MiniCssExtractPlugin({ filename:'css/built.css'//对输出的文件进行重命名 }), //压缩css文件 new OptimizeCssAssetsWebpackPlugin() ],
[関連ビデオ チュートリアルをお勧めします: vuejs 入門チュートリアル 、Web フロント エンドの概要 ]
以上がWebpack を解析して CSS を別のファイルに抽出する例 (コードは添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。