在讲解提取css之前,我们先看下项目的架构如下结构:
### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- app | | |---index | | | |-- views # 存放所有vue页面文件 | | | | |-- index.vue | | | | |-- list.vue | | | |-- components # 存放vue公用的组件 | | | |-- js # 存放js文件的 | | | |-- css | | | | |-- base.css | | | | |-- index.css | | | |-- store # store仓库 | | | | |--- actions.js | | | | |--- mutations.js | | | | |--- state.js | | | | |--- mutations-types.js | | | | |--- index.js | | | |-- app.js # vue入口配置文件 | | | |-- router.js # 路由配置文件 | |--- views | | |-- index.html # html文件 | |--- webpack.config.js # webpack配置文件 | |--- .gitignore | |--- README.md | |--- package.json | |--- .babelrc # babel转码文件
我们都知道提取css的插件是使用 extract-text-webpack-plugin 这个插件,但是在webpack4中需要如下安装该插件:
npm i [email protected] -D
首先想让项目里面的css打包生效的话,有二种方式,第一种是使用 style-loader自动将css代码插入到head标签style内,第二种方式是使用 extract-text-webpack-plugin 插件单独提取一个css文件,然后在页面上引入该css文件即可。
下面我们分别来介绍 第三方库css文件,项目全局的css,及vue中内联的css或stylus样式是如何提取到单独的文件内的。
首先在介绍之前,我们编写全局的css的话,需要抛弃掉stylus了,为什么要抛弃掉呢?因为styl文件和extract-text-webpack-plugin 插件一起使用的话会报错,比如如下配置代码:
module.exports = { module: { rules: [ { // 使用正则去匹配 test: /\.styl$/, use: ExtractTextPlugin.extract({ fallback: { loader: ‘style-loader‘, options: { singleton: true // 表示将页面上的所有css都放到一个style标签内 } }, use: [ { loader: ‘style-loader‘, options: {} }, { loader: ‘css-loader‘, options: { minimize: true } }, { loader: ‘postcss-loader‘, options: { ident: ‘postcss‘, plugins: [ require(‘postcss-cssnext‘)(), require(‘cssnano‘)(), require(‘postcss-pxtorem‘)({ rootValue: 16, unitPrecision: 5, propWhiteList: [] }), require(‘postcss-sprites‘)() ] } }, { loader: ‘stylus-loader‘, options: {} } ] }) } ] } }
报错信息内容如下:
可以看这个文章(https://segmentfault.com/q/1010000009432668), 也是在讲webpack配置styl+postcss+ExtractTextPlugin错误的问题。
因此对于项目全局的css文件建议直接使用css后缀即可,然后我就想在项目的入口文件app.js 这样引入css文件,如下:
// 引入element组件化框架 import ElementUI from ‘element-ui‘; import ‘element-ui/lib/theme-chalk/index.css‘; // 引入样式文件 import ‘./css/index.css‘;
如上代码,第三方库文件是饿了么vue组件的样式,项目全局的css文件是 css/index.css, 如上这样引入进来,index.css
代码如下:
@import ‘./base.css‘; body { font-size: 18px; display: flex; }
css/base.css 代码如下:
body, p , div { margin: 0; padding: 0; }
然后对于 vue 文件内部编写css的话,如下使用stylus编写的,代码如下:
<style lang="stylus"> #list-container width 100% </style> <template> <div id="list-container">hello world</div> </template> <script type="text/javascript"> export default { data() { return { } } } </script>
因此webpack.config.js 部分代码如下配置:
const ExtractTextPlugin = require("extract-text-webpack-plugin"); const webpack = require(‘webpack‘); // 引入打包html文件 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); module.exports = { module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: { loader: ‘style-loader‘, options: { singleton: false // 为true表示将页面上的所有css都放到一个style标签内 } }, use: [ { loader: ‘css-loader‘, options: { minimize: true } }, { loader: ‘postcss-loader‘, options: { ident: ‘postcss‘, plugins: [ require(‘postcss-cssnext‘)(), require(‘cssnano‘)(), require(‘postcss-pxtorem‘)({ rootValue: 16, unitPrecision: 5, propWhiteList: [] }), require(‘postcss-sprites‘)() ] } } ] }) }, { test: /\.vue$/, loader: ‘vue-loader‘, options: { // extractCSS: true, loaders: { css: ExtractTextPlugin.extract({ use: ‘css-loader‘, fallback: ‘vue-style-loader‘ }), styl: ExtractTextPlugin.extract({ use: ‘css-loader!stylus-loader‘, fallback: ‘vue-style-loader‘ }) }, postLoaders: { html: ‘babel-loader‘ } } } ] }, plugins: [ new HtmlWebpackPlugin({ hash: true, //为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。 template: ‘./views/index.html‘ // 模版文件 }), new ClearWebpackPlugin([‘dist‘]), new ExtractTextPlugin({ filename: process.env.NODE_ENV === ‘production‘ ? ‘[name].[contenthash:7].css‘ : ‘bundle.css‘, allChunks: true }) ] };
然后在项目中运行 npm run dev 打包,可以看到打包后的bundle.css代码如下信息:
如上打包会把 base.css 和 index.css 及 vue的样式文件都打包到 bundle.css文件内。
但是vue内联样式会打包到 head内部的style标签中,如下截图所示:
理解ExtractTextWebpackPlugin.extract()方法
ExtractTextWebpackPlugin.extract({ fallback:{ loader: ‘style-loader‘, options: { singleton: false // 为true表示将页面上的所有css都放到一个style标签内 } }, use:[] });
fallback:指编译后用什么loader来提取css文件。例如使用style-loader, 然后上面的options是选项,设置singleton为false的话,可以把css文件单独提取出来,如果为true的话,会将页面上所有的css文件都放在一个style标签内。
use:指需要什么样的loader去编译文件。 如.css文件使用css-loader,如下:
{ loader: ‘css-loader‘, options: { minimize: true } }
现在我们需要解决的是把所有的css文件打包到一个文件里面去。其实很简单只要把vue中的配置文件 extractCSS: true, 会把vue中的样式文件提取出来 打开就可以了,如下部分配置代码:
{ test: /\.vue$/, loader: ‘vue-loader‘, options: { extractCSS: true, // 会把vue中的样式文件提取出来 loaders: { css: ExtractTextPlugin.extract({ use: ‘css-loader‘, fallback: ‘vue-style-loader‘ }), styl: ExtractTextPlugin.extract({ use: ‘css-loader!stylus-loader‘, fallback: ‘vue-style-loader‘ }) }, postLoaders: { html: ‘babel-loader‘ } } },
然后执行打包命令,再看下效果如下所示:
JS代码如下所示:
因此所有的webpack.config.js 代码如下:
const path = require(‘path‘); const ExtractTextPlugin = require("extract-text-webpack-plugin"); // 清除dist目录下的文件 const ClearWebpackPlugin = require(‘clean-webpack-plugin‘); const webpack = require(‘webpack‘); // 引入打包html文件 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); // 引入HappyPack插件 const HappyPack = require(‘happypack‘); // 引入 ParallelUglifyPlugin 插件 const ParallelUglifyPlugin = require(‘webpack-parallel-uglify-plugin‘); // 引入 webpack-deep-scope-plugin 优化 const WebpackDeepScopeAnalysisPlugin = require(‘webpack-deep-scope-plugin‘).default; // 引入 DllReferencePlugin const DllReferencePlugin = require(‘webpack/lib/DllReferencePlugin‘); module.exports = { // 入口文件 entry: { main: ‘./app/index/app.js‘ }, output: { filename: process.env.NODE_ENV === ‘production‘ ? ‘[name].[contenthash].js‘ : ‘bundle.js‘, // 将输出的文件都放在dist目录下 path: path.resolve(__dirname, ‘dist‘) }, module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: { loader: ‘style-loader‘, options: { singleton: false // 为true表示将页面上的所有css都放到一个style标签内 } }, use: [ { loader: ‘css-loader‘, options: { minimize: true } }, { loader: ‘postcss-loader‘, options: { ident: ‘postcss‘, plugins: [ require(‘postcss-cssnext‘)(), require(‘cssnano‘)(), require(‘postcss-pxtorem‘)({ rootValue: 16, unitPrecision: 5, propWhiteList: [] }), require(‘postcss-sprites‘)() ] } } ] }) }, { test: /\.(png|jpg)$/, use: [‘happypack/loader?id=image‘] }, { test: /\.js$/, // 将对.js文件的处理转交给id为babel的HappyPack的实列 use: [‘happypack/loader?id=babel‘], // loader: ‘babel-loader‘, exclude: path.resolve(__dirname, ‘node_modules‘) // 排除文件 }, { test: /\.vue$/, loader: ‘vue-loader‘, options: { extractCSS: true, // 会把vue中的样式文件提取出来 loaders: { css: ExtractTextPlugin.extract({ use: ‘css-loader‘, fallback: ‘vue-style-loader‘ }), styl: ExtractTextPlugin.extract({ use: ‘css-loader!stylus-loader‘, fallback: ‘vue-style-loader‘ }) }, postLoaders: { html: ‘babel-loader‘ } } }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 处理图片 use: { loader: ‘url-loader‘, // 解决打包css文件中图片路径无法解析的问题 options: { // 打包生成图片的名字 name: ‘img/[name].[contenthash:7].[ext]‘, limit: 1024 } } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 处理字体 use: { loader: ‘file-loader‘ } }, //媒体文件处理 { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: ‘url-loader‘, options: { limit: 40000, name: ‘media/[name].[hash:7].[ext]‘ } } ] }, resolve: { alias: { ‘vue$‘: ‘vue/dist/vue.esm.js‘ }, modules: [ path.join(__dirname, ‘./app‘), ‘node_modules‘ ], extensions: [‘*‘, ‘.js‘, ‘.json‘, ‘.vue‘, ‘.styl‘] }, devtool: ‘cheap-module-eval-source-map‘, devServer: { port: 8081, host: ‘0.0.0.0‘, headers: { ‘X-foo‘: ‘112233‘ }, inline: true, overlay: true, stats: ‘errors-only‘ }, mode: process.env.NODE_ENV === ‘production‘ ? ‘production‘ : ‘development‘, plugins: [ new HtmlWebpackPlugin({ hash: true, //为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。 template: ‘./views/index.html‘ // 模版文件 }), new ClearWebpackPlugin([‘dist‘]), new ExtractTextPlugin({ filename: process.env.NODE_ENV === ‘production‘ ? ‘[name].[contenthash:7].css‘ : ‘bundle.css‘, allChunks: true }), /**** 使用HappyPack实例化 *****/ new HappyPack({ // 用唯一的标识符id来代表当前的HappyPack 处理一类特定的文件 id: ‘babel‘, // 如何处理.js文件,用法和Loader配置是一样的 loaders: [‘babel-loader‘] }), new HappyPack({ id: ‘image‘, loaders: [{ loader: require.resolve(‘url-loader‘), options: { limit: 10000, name: ‘[name].[ext]‘ } }] }), // 使用 ParallelUglifyPlugin 并行压缩输出JS代码 new ParallelUglifyPlugin({ // 传递给 UglifyJS的参数如下: uglifyJS: { output: { /* 是否输出可读性较强的代码,即会保留空格和制表符,默认为输出,为了达到更好的压缩效果, 可以设置为false */ beautify: false, /* 是否保留代码中的注释,默认为保留,为了达到更好的压缩效果,可以设置为false */ comments: false }, compress: { /* 是否在UglifyJS删除没有用到的代码时输出警告信息,默认为输出,可以设置为false关闭这些作用 不大的警告 */ warnings: false, /* 是否删除代码中所有的console语句,默认为不删除,开启后,会删除所有的console语句 */ drop_console: true, /* 是否内嵌虽然已经定义了,但是只用到一次的变量,比如将 var x = 1; y = x, 转换成 y = 5, 默认为不 转换,为了达到更好的压缩效果,可以设置为false */ collapse_vars: true, /* 是否提取出现了多次但是没有定义成变量去引用的静态值,比如将 x = ‘xxx‘; y = ‘xxx‘ 转换成 var a = ‘xxxx‘; x = a; y = a; 默认为不转换,为了达到更好的压缩效果,可以设置为false */ reduce_vars: true } } }), new WebpackDeepScopeAnalysisPlugin(), // 设置环境变量信息 new webpack.DefinePlugin({ ‘process.env‘: { NODE_ENV: JSON.stringify(process.env.NODE_ENV) } }) ] };
原文地址:https://www.cnblogs.com/tugenhua0707/p/9912091.html