有两个组件home和search两个组件中都有class为footer的元素但是search的footer比home的多一条background的样式本地开发的时候没问题，但是打包之后，home也被打包上了background的样式暂时处理方法是home和search的footer元素使用不同的class原文：https://www.cnblogs.com/chenzeyongjsj/p/8414207.html
一：基本概念1、字面意思是摇树，一句话：项目中没有使用的代码会在打包时候丢掉。分为css的tree shaking和js的tree shaking。2、使用场景：1）常规优化。2）使用第三方库，但是只使用了部分功能。二：JS tree shaking在webpack4中已经移除了UglifyJsPlugin，只需要配置mode为"production"，即可显式激活 UglifyjsWebpackPlugin 插件。下面说的是webpack3.10.0的实现方法：（1）常规业务的tree shaking1、webpack.config.js配置con...
一：目录结构二：webpack.config.js的配置const path = require(‘path‘);module.exports = {mode:‘development‘,entry:{app:‘./src/app.js‘},output:{path:path.resolve(__dirname,‘dist‘),publicPath:‘./dist/‘,//设置引入路径在相对路径filename:‘[name].bundle.js‘},module:{rules:[{ test: /\.css$/,use:[{loader:‘style-loader‘//style-loader作用：主要创建style标签，把css插入html代码中。<style></style>//...
webpack是目前使用比较流行的一个前端模块打包器，前端的任何资源都被当成一个模块来处理，如图片、css文件等等。在基于webpack构建的前端项目中，一般都会配置有关css文件处理的规则，这其中也包括css文件中图片资源的处理，那么webpack到底是怎么处理它的呢？笔者之前也遇到过类似图片路劲的问题，为此还写过一篇博文webpack生成的css文件background-image url图片无法加载。今天就来说说webpack是怎么处理css文件中的图片路径的...
demo 代码点此，webpack4 中通过 css-loader 开启 css 模块化, 开始前先做点准备工作。不了解 css 模块化的，可以前往查看github_css_modules.## 准备工作安装 webpack：npm init -y
npm i -D webpack webpack-cli css-loader创建 webpack.config.js 进行配置：const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');module...
module.exports = {output: {filename: ‘[name].js‘,chunkFilename: ‘[name].chunk.js‘,path: path.resolve(__dirname, ‘../dist‘)}
}在看别人写的webpack，output配置项，肯跟会碰到chunkFilename这样的配置项，那这个是什么意思呢？filename和chunkFilename有什么区别呢？首先看个例子 index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial...
1. 安装：复制拷贝文件cnpm install postcss-loader autoprefixer --save-dev2. webpack.config.js中使用 rules: [//配置css加载器 {test: /\.css$/,use: cssExtract.extract({fallback: "style-loader",use: ["css-loader", "postcss-loader"]})},//配置sass加载器 {test: /\.scss$/,use: sassExtract.extract({fallback: ‘style-loader‘,use: [‘css-loader‘, "postcss-loader", ‘sass-loader‘...
在讲解提取css之前，我们先看下项目的架构如下结构：### 目录结构如下：
demo1 # 工程名
| |--- dist # 打包后生成的目录文件
| |--- node_modules # 所有的依赖包
| |--- app
| | |---index
| | | |-- views # 存放所有vue页面文件
| | | | |-- index.vue
|...
webpack.conf.js 中 resolve.alias 配置resolve: {extensions: [‘.js‘, ‘.vue‘],alias: {‘@‘: path.resolve(__dirname, ‘src‘),‘@scss‘: path.resolve(__dirname, ‘src‘, ‘scss‘),}
}配置了resolve.alias 后，在js中我们可以这样用// 原本这样写
import hongAlert from ‘./../src/scss/icon.scss‘// 现在可以这样写
import hongAlert from ‘@scss/icon.scss‘在scss中需要这样写，注意是~@// 原本这样写
@import ...
webpack4 单独抽离打包 css 的新实现前言之前我们使用的打包 css 无非两种方式：① 将 css 代码打包进 入口 js 文件中；② 使用第三方插件(extract-text-webpack-plugin)实现【注意，该插件在 webpack4 中已经不推荐使用，而且会出现各种莫名其妙的 bug】正是基于对以上两种方式缺点的思考，结合我的实际使用过程，我认为以后我们应该完全摒弃掉上述两种方式，这里推荐一种一种新的实现方式：file-loaderfile-loader我先给个 file-...
<!--本节 loader配置处理css样式在src下新建css文件夹 在css下创建index.css 在main.js这个入口文件中 引入js模块 和 css杨思表是不同的在main.js文件中 import ‘./css/index.css‘注意：webpack默认只能打包处理JS类型的文件 无法处理其他的非JS类型的文件如果处理其他非js类型的文件 需要安装第三方的loader加载器cnpm i style-loader css-loader -D 需要安装两个加载器 这个凉饿模块处理css打开webpack.config.js这...
压缩css,去除注释安装插件npm install --save-dev optimize-css-assets-webpack-plugin配置webpack.config.js头部引入插件const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin") ` 参数意义assetNameRegExp正则表达式，用于匹配需要优化或者压缩的资源名。默认值是/.css$/gcssProcessor用于压缩和优化CSS 的处理器，默认是 cssnano.cssProcessorPluginOptions传递给cssProcessor的插件选项，默认为{}can...
npmnpm i -D style-loader css.loader
webpack.config.jsmodule.exports = {// ...module: {rules: [{test: /\.css$/,use: [‘style-loader‘, ‘css-loader‘],},],},
}
原文：https://www.cnblogs.com/aisowe/p/15245956.html
我们接着上文，那么在上篇文章的最后，写到了css-loader的用法，如果你用心发现，就能看到我在style.css样式文件中写了一个这样的样式：div {transition: all ease 1s;}一、这是一个css3的过渡样式，我们知道，写css3的时候，需要加上浏览器前缀. 那么我们着这里就需要安装postcss-loader和autoprefixer插件安装postcss-loader: npm install postcss-loader --save-dev安装autoprefixer: npm install autoprefixer --save-dev 在de...
Webpack Project ConfigurationGithub Repository本部分假设你已经对Webpack有了大概的了解，这里我们会针对笔者自己在生产环境下使用的Webpack编译脚本进行的一个总结，在介绍具体的配置方案之前笔者想先概述下该配置文件的设计的目标，或者说是笔者认为一个前端编译环境应该达成的特性，这样以后即使Webpack被淘汰了也可以利用其他的譬如JSPM之类的来完成类似的工作。单一的配置文件：很多项目里面是把开发环境与生产环境写了两个...
