🤓
blog-article
  • Introduction
  • 面试题
    • 1. 输入url发生了什么
  • Personal Works
    • 1. 简单的Web图床
  • CSS动画笔记
    • 1.transition 属性
    • 2.transition 实例
  • css 笔记
    • 1. box-shadow 阴影
    • 2. columns 设置列宽和列数
    • 3. 伪元素after与before
  • html 笔记
    • 1. 不常用的h5标签杂记
  • webpack4
    • 1. 文档学习记录
    • 2. 加载CSS
    • 3. 加载less
    • 4. 加载sass
    • 5. 根据浏览器自动添加css前缀
    • 6. 图片文件处理
    • 7. 字体文件处理
    • 8. 引入jQuery
    • 9. 打包HTML文件
    • 10. 分离css插件
    • 11. babel简单使用
    • 12. 清理旧打包文件插件
    • 13. 拷贝静态资源
  • javascript
    • 1. js获取某年某月的天数
  • npm
    • 2. JSON.stringify()完整用法
    • 1. 入门篇
    • 2. 进阶篇
  • Node.js
    • 1. 使用koa-body中间件后ctx.request.body内容为空
    • 2. uni-app使用Node+Koa2接收上传的文件
  • SQL
    • 1. 查询
    • 2. 插入
    • 3. 修改
    • 4. 删除
    • 5. 期末复习
  • Git
    • 1. git add命令后出现another git process...问题
    • 2. 将文件从暂存区移除
  • vue-cli
    • 1. vue-cli(脚手架)引入vue.config.js文件后热更新失效,每次保存都会刷新页面
  • uni-app
    • 1. uni-app中不使用scroll-view组件,监听页面滑直底部事件
  • 设计模式
    • 创建型模式
    • 单例模式
    • 工厂模式
    • 抽象工厂模式
  • Spring boot
    • 1. 使用自定义参数注解获取 token 中User数据
  • IDEA
    • 1. 设置maven项目的默认配置
  • Linux
    • 1.常用命令
    • 2.常用基础命令2
    • 3.linux目录介绍
    • 4. vi编辑器使用
    • 5.用户管理
    • 6. 文件属性与权限操作
    • 7. 文件归档与解压缩
    • 8. gcc的基本用法
    • 9. gdb调试器的基本用法
    • 10. Makefile基本用法
  • shell
    • shell与crontab定时器的结合
    • 1. shell 变量与常见符号
    • 2. shell中的四则运算符
    • 3. 条件判断
    • 4. 输入输出
    • 5. 输出彩色的内容
    • 6. 流程控制
    • 7. 函数
  • Docker
  • 嵌入式系统给结构及原理
  • 学校课程笔记
    • 1. java EE 复习
    • 2. 马原复习论述题
    • 3. 嵌入式软件技术复习
    • 4. 嵌入式操作系统复习
    • 5. 马原选择题
    • 6. 马原辨析题
    • 7. 马原材料题
    • 8. 计网学习笔记
    • 9. 计网复习
      • 1. 第一章
Powered by GitBook
On this page
  • 安装webpack4
  • 配置文件
  • 开发环境配置文件
  • mode (模式)
  • 配置方法1
  • 方法2
  • 根据环境选择打包方式(配置文件)
  • entry (入口文件)
  • 单入口
  • 参数为数组时
  • 多入口(对象语法)
  • 多页面使用场景
  • output(输出配置)
  • 基本用法
  • 占位符
  • 高级用法
  • 动态设置
  • resolve(解析)
  • resolve.alias
  • resolve.modules
  • loader
  • css-loader与style-loader
  • 配置方法
  • configuration(配置)
  • 基本配置
  • 常用详细配置(部分待完善))

Was this helpful?

  1. webpack4

1. 文档学习记录

安装webpack4

① 本地安装
npm install -save-dev webpack
npm install -save-dev webpack-cli
② 全局安装
npm install -global webpack webpack-cli

配置文件

  • wabpack.config.js (不指定文件时,默认使用)

  • webpack.config.dev.js

    • 开发环境使用

  • webpack.config.build.js

    • 生产环境使用

      npm 启动命令

      "scripts": {
          "dev": "webpack-dev-server  --config=config/webpack.config.dev.js",
          "dev:dist": "webpack --mode development --config=config/webpack.config.dev.js",
          "build": "webpack --mode production  --config=config/webpack.config.build.js"
      },

开发环境配置文件

mode (模式)

  • development -- 开发环境 会将 DefinePlugin 中 process.env.NODE_ENV 的值 设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

  • productiom -- 生产环境 **(默认值)** 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。

  • none -- 不设置可以在npm启动命令中添加参数

    • 退出任何默认优化选项

mode: development ```js module.exports = { + mode: 'development' - devtool: 'eval', - cache: true, - performance: { - hints: false - }, - output: { - pathinfo: true - }, - optimization: { - namedModules: true, - namedChunks: true, - nodeEnv: 'development', - flagIncludedChunks: false, - occurrenceOrder: false, - sideEffects: false, - usedExports: false, - concatenateModules: false, - splitChunks: { - hidePathInfo: false, - minSize: 10000, - maxAsyncRequests: Infinity, - maxInitialRequests: Infinity, - }, - noEmitOnErrors: false, - checkWasmTypes: false, - minimize: false, - }, - plugins: [ - new webpack.NamedModulesPlugin(), - new webpack.NamedChunksPlugin(), - new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }), - ] } ```

mode: production ```js module.exports = { + mode: 'production', - performance: { - hints: 'warning' - }, - output: { - pathinfo: false - }, - optimization: { - namedModules: false, - namedChunks: false, - nodeEnv: 'production', - flagIncludedChunks: true, - occurrenceOrder: true, - sideEffects: true, - usedExports: true, - concatenateModules: true, - splitChunks: { - hidePathInfo: true, - minSize: 30000, - maxAsyncRequests: 5, - maxInitialRequests: 3, - }, - noEmitOnErrors: true, - checkWasmTypes: true, - minimize: true, - }, - plugins: [ - new TerserPlugin(/* ... */), - new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }), - new webpack.optimize.ModuleConcatenationPlugin(), - new webpack.NoEmitOnErrorsPlugin() - ] } ```

mode: none ```js module.exports = { + mode: 'none', - performance: { - hints: false - }, - optimization: { - flagIncludedChunks: false, - occurrenceOrder: false, - sideEffects: false, - usedExports: false, - concatenateModules: false, - splitChunks: { - hidePathInfo: false, - minSize: 10000, - maxAsyncRequests: Infinity, - maxInitialRequests: Infinity, - }, - noEmitOnErrors: false, - checkWasmTypes: false, - minimize: false, - }, - plugins: [] }9910 ```

配置方法1

module.exports={
    mode:"development"
}

方法2

webpack --mode=production

根据环境选择打包方式(配置文件)

let config={
    entry:'./index.js',
    // ...code
}

module.exports=(env,argv)=>{
    let {mode}=argv;//获取当前的打包模式
    if(mode==='production'){
        config.devtool='source-map';
    }

    if(mode==='development'){
        config.devtool='xxx'
    }
    return config;
}

entry (入口文件)

默认 -- ./src/index.js(不指定的情况下)

单入口

  module.exports={
      entry:'./src/index.js'
  }

等价于

module.exports={
    entry:{
        main:'./src/index.js'
    }
}

参数为数组时

向 entry 属性传入文件路径数组时,将创建出一个多主入口chunk。在需要要一次注入多个依赖文件,并且将它们的依赖导向到一个 chunk

module.exports={
    entry:{
        main:['index.js','second.js']
    }
}

多入口(对象语法)

entry:{[entryName:String]:String|Array}

module.exports={
    entry:{
        index:'index.js',
        second:['s1.js','s2.js']
    }
}

多页面使用场景

推荐:一个HTML文档一个入口文件

module.export={
    entry:{
        pageone:'./src/pageone/index.js',
        pagetwo:'./src/pagetwo/index.js'
    }
}

output(输出配置)

控制 webpack 如何向硬盘写入编译文件。即使存在多个 entry 起点,但只指定一个 output 配置。

基本用法

  • filename:打包后的文件名 默认:main.js

  • path:打包后的路径 默认:./dist/

会在打包后的dist目录中生成bundle.js文件

module.export={
    output={
        filename:'bundle.js'
    }
}

占位符

  • [ext]:资源扩展名

  • [name]:资源的基本名称

  • [path]:资源相对于context的路径

  • [hash]:内容的哈希值

    多入口时

    使用文件名做占位符

    import path=require('path');
    module.export={
      entry:{
          index:'index.js',
          second:'second.js'
      },
      output:{
          filename:'[name].js',//使用占位符
          path:path.join(__dirname,'dist/js')
      }
    }

高级用法

module.export={
    output:{
        path:'/home/xxx/[hash]',
        publicPath:'http://img.cdn.xxx.com/dir/[hash]'
    }
}

动态设置

__webpack_public_path=myRuntimePublicPath

resolve(解析)

配置模块如何解析。例如,当在 ES2015 中调用 import 'lodash',resolve 选项能够对 webpack 查找 'lodash' 的方式去做修改(查看模块)。

resolve.alias

创建 import或require别名

module.exports={
    resolve:{
        alias:{
            utils:path.resolve(__dirname,'src/util/')
        }
    }
}

导入

import jsonUtil from 'utils/jsonUtil'

resolve.modules

解析时搜索的目录

module.exports={
    resolve:{
        modules:[
            "node_modlues"
        ]
    }
}

loader

css-loader与style-loader

加载CSS

install

npm run i style-loader css-loader -D

使用

module.exports={
    module:{
        rules:[
             {
                  test:/\.css$/,//正则表达式,以.css结尾的文件
                 use: ['style-loader','css-loader']//顺序不能颠倒
            }
        ]
    }

}

配置方法

1.configuration

module.rules 允许你在 webpack 配置中指定多个 loader。 这种方式是展示 loader 的一种简明方式,并且有助于使代码变得简洁和易于维护。同时让你对各个 loader 有个全局概览: loader 从右到左地取值(evaluate)/执行(execute)。在下面的示例中,从 sass-loader 开始执行,然后继续执行 css-loader,最后以 style-loader 为结束。查看 loader 功能 了解有关 loader 顺序的更多信息。

  • test: 用于标识出应该被对应的 loader 进行转换的某个或某些文件。

  • use: 表示进行转换时,应该使用哪个 loader。

    ```js

    module.exports={

    module:{

      rules:[
       {
          test:/\.css$/,
          use: [
              { loader: 'style-loader' },
               {
                  loader: 'css-loader',
                  options: {
                      modules: true
                  }
           },
           { loader: 'sass-loader' }
          ]
        }

    ]

    }

}

#### [2. inline(内联)](https://webpack.docschina.org/concepts/loaders/#%E5%86%85%E8%81%94-inline-)
#### [3. cli(脚手架)](https://webpack.docschina.org/concepts/loaders/#cli)

## plugin(插件)

插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。
>想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的一个实例。

>[插件列表](https://webpack.docschina.org/plugins)
### 例子
#### html-webpack-plugin
```npm
npm i html-webpack-plugin -D
// 打包html
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: false,//去掉参数双引号
                removeComments: false, //去掉注释
                collapseWhitespace: false //去掉空白
            },
            chunks: ['base', 'index'], //引入对应的js
            template: 'src/index.html'
        })
    ]
}

configuration(配置)

基本配置

module.exports={
    mode:'development',
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'index.js'
    }
}

常用详细配置(部分待完善))

module.exports={
    mode:"development",//可选development|production|none
    entry:'./src/index.js',//String|Array|Object
    output:{//输出配置
        //string
        //所有输出文件的目标路径
        //必须是绝对路径
        path:path.resolve(__dirname,'dist'),
        //string
        //[name].js 用于多入口(entry)
        //[chunkhash].js    用于长效缓存
        filename:'main.js',
        //输出解析文件的目录
        publicPath:'/assets/',//string
        //在生成代码时,引入相关的模块、导出、请求等有帮助的路径信息。
        pathInfo:true,
        //附加分块的文件名模板
        chunkFilename:"[id].js",
    },
    module:{
        rules:[//模块规则
            {  
                //规范只在文件名和test中使用正则
                //include和exclude使用绝对路径
                //避免使用exclude
                test:/\.jsx$/,//匹配条件
                include:[//必须匹配
                    path.resolve(__dirname,'app')
                ],
                exclude:[//必须不匹配
                    path.resolve(_dirname,'app/demo-files')
                ],
                issuer:[test,include,exlude],//导入源
                loader: 'xxx-loader',
                options: {
                    name: '[hash].[ext]',
                    outputPath: './img',
                    esModule: false//解决html中出现export default
                }
            }
        ]
    },
    //解析模块请求的选项
    //不适用于loader的解析
    resolve:{
        //用于查找模块的目录
        modules:[
        "node_modules",
        path.resolve(__dirname,'app')
        ],
        //使用的扩展名
        extensions:['.js','jsx','json','.css'],
        //模块别名
        alias:{
            moduleName:"module/path/file",
        }
    }
}
Previouswebpack4Next2. 加载CSS

Last updated 5 years ago

Was this helpful?