webpack打包

Webpack重构笔记

webpack具有Grunt、Gulp对于静态自动化构建的能力，但更重要的是，webpack弥补了requireJS在模块化方面的缺陷，同时兼容AMD与CMD的模块加载规范，具有更强大的JS模块化的功能

webpack打包机制

webpack 是一个模块化打包机，将根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源
当 webpack 处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle.js

什么是模块化

前端模块化详解

初始化项目

npm init

独立出css样式

安装插件

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

在webpack.config.js中配置

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

配置参数意义：

use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路径

独立出less样式

使用npm安装less服务

npm install less --save-dev

安装Less-loader用来打包使用

npm install less-loader --save-dev

在module中配置less-loader

{
    test: /\.less$/,
    use: [{
           loader: "style-loader" 
        }, {
            loader: "css-loader" 
        , {
            loader: "less-loader"
        }]
}

在module中配置less

use:extractTextPlugin.extract({
    use:[{
        loader:'css-loader'
    },{
            loader:'less-loader'
        }],
    fallback:'style-loader'
})

回顾less基础语法<此内容与webpack无关，可跳过>

变量

可以将属性的值赋值给一个变量，只能定义一次

image
作为属性值，加减乘除

image

Mixin混入

将一些通用的属性放在一个class中，然后在其他class中去调用这些属性

image

嵌套子元素的样式可以在父元素的样式里面定义

image

And so on ...

css中的图片处理

安装file-loader

npm install file-loader --save-dev

安装url-loader

npm install url-loader --save-dev

在module中配置file-loader和url-loader

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, {
                test: /\.(png|jsp|gif)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 500000
                    }
                }]
            }
        ]
    },
```]()

最后编辑于：2020.05.02 11:14:55