...持续中

=======================================================

样式处理

注意：开始之前以下内容之前，需要配置一些webpack的基础配置，传送门：

当前目录为：

• index.html文件内容：

  
      
      
        
    
     我是一个html原文件，我想打包后自动把打包后的js插入到我的文件中， 并且把我自动放到打包后的那个目录中...
    

• package.json文件内容：

{  "name": "webpack",  "version": "1.0.0",  "main": "index.js",  "license": "MIT",  "scripts": {    "dev": "webpack --mode development && webpack-dev-server",    "build": "webpack --mode production"  },  "devDependencies": {    "html-webpack-plugin": "^3.2.0",    "webpack": "^4.29.4",    "webpack-cli": "^3.2.3",    "webpack-dev-server": "^3.1.14",    "webpack-html-plugin": "^0.1.1"  }}

• webpack.config.js文件内容：

let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {  // mode: 'development',  //开一个本地服务  devServer: {    port: 3000, //端口号    progress: true, //进度条    contentBase: './dist', //指定目录运行服务    open: true //自动打开浏览器  },  entry: './src/index.js',  output: {    filename: 'bundle.js',    path: path.resolve(__dirname, 'dist')  },  //插件配置  plugins: [    new HtmlWebpackPlugin({      template: './src/index.html', //原始文件      filename: 'index.html', //编译后的文件名称      hash: true, //hash    })  ]}

下面开始配置css：

css配置

• 首先看看这种直接引入css的方法行不行：

step1: 打开src目录，新建index.css文件，并输入：

body {  background: red;}

step2: 打开src目录的index.html，直接把index.css文件引入，如下：

尝试运行： npm run dev，成功， 结果如下：

查看编译好的dist目录发现，这种直接引用css的方法虽然没有报错，但是在dist/index.html中只是原封不动的把<link rel="styleSheet" href="./index.css" />输出了，css并没有生效，所以这种直接引入的方法不可行，那么怎么样把css引入进来呢？方法如下：

• 把css作为模块引入文件：

step1：打开src/index.js文件，引入要编译的css文件：index.css

require('./index.css');

尝试运行：npm run dev, 结果如下：

报了个错说需要一个合适的loader来处理这个css文件，接下来进行相应的配置：

step2: 打开webpack.config.js文件，进行module配置:

// 模块配置  module: {    rules: [      {test: /\.css$/, use: ['style-loader', 'css-loader']}    ]  },

安装style-loader, css-loader:

yarn add style-loader css-loader -D

尝试运行：npm run dev，body背景颜色变红，成功！结果如下：

• 补充

  1. loader：webpack编译对于css，图片，或者其他的语法集比如jsx等这些是没有办法直接加载的，需要对应的loader把资源进行转化并加载，执行顺序：从右到左，从下到上。
  2. css-loader: 解析css中的代码，像是@import这种语法，比如在index.css中引入另一个other.css文件，需要@import './other.css'。
  3. style-loader: 将css模块作为样式插入到DOM中。

抽离css文件

上边那种方式是把css直接插入到了html中，如图：

这样很乱，我们可以抽离css，引入到html中，方法如下：

step1: 安装mini-css-extract-plugin插件：

yarn add mini-css-extract-plugin -D

step2: 打开webpack.config.js文件，进行配置：

let MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽离CSS//插件配置plugins: [  new MiniCssExtractPlugin({    filename: 'main.css' //抽离出的css文件名称    //filename: 'css/main.css  //抽离出的css文件存放在css目录下  })] // 模块配置 module: {   rules: [{     test: /\.(css|scss)$/,     //将style-loader 改为 MiniCssExtractPlugin.loader，表示该类型的文件会被抽离成一个独立css文件，link引入到html中。     use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']   }] },

尝试运行：npm run dev, 抽离成功， 这里index.css, index.scss文件合并在一起被生成了一个main.css，引入到了dist/index.html文件中，如图：

less配置

step1：打开src目录，新建index.less文件，并输入：

body {  div {    width: 500px;    height: 500px;    background: yellow;  }}

step2: 打开src/index.js文件，引入index.less文件：

require('./index.less');

step3: 打开webpack.config.js文件，修改module部分：

// 模块配置  module: {    rules: [      {test: /\.(css | less)$/, use: ['style-loader', 'css-loader', 'less-loader']},    ]  },

step4: 安装less, less-loader：

yarn add less less-loader -D

尝试运行：npm run dev，成功！结果如下：

scss配置

step1: 基础目录配置之后，打开webpack.config.js文件，配置module部分：

// 模块配置  module: {    rules: [      {test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader']},     ]  },

step2: 安装node-sass, sass-loader：

yarn add node-sass sass-loader -D

step3: 尝试运行：npm run dev，成功！

给css加前缀

我们在写css的时候，遇到一些css3语法需要加浏览器前缀去兼容，每次写-webkit-之类的前缀很麻烦，有一种方法自动给css加上这种前缀，如下：

step1: 配置webpack.config.js文件

// 模块配置  module: {    rules: [{      test: /\.(css|scss)$/,      //增加postcss-loader      use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']    }]  },

step2: 增加配置文件postcss.config.js,并配置如下:

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

step3: 安装插件：

yarn add postcss-loader autoprefixer -D

尝试运行：npm run dev， 成功，如图：

优化项配置

项目上线前打包的时候，想把编译好的css, js文件压缩了怎么处理呢？需要优化项插件optimize-css-assets-webpack-plugin，uglifyjs-webpack-plugin方法如下：

step1: 配置webpack.config.js文件

let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin'); //压缩csslet UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //压缩js//优化项配置optimization: {  minimizer: [    new OptimizeCssPlugin(),  //压缩css        //压缩js    new UglifyJsPlugin({       cache: true, //缓存       parallel: true, //并发打包       sourceMap: true  //源码映射便于调试    })  ]},

step2: 安装插件

yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

尝试打包： npm run build, 结果如下：