前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 打包文件 支持JS模块化 模式: production(0配置默认), development(生产环境) 更详细的请前往 webpack官网 安装 npm i webpack webpack-cli -D 执行 webpack npx webpack 注意: 在有package.json的目录下执行命令, 当前目录一定要有src文件夹 手动配置webpack module.exports = { mode: '…

前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack打包图片和划分文件路径 使用图片的方式 通过 new Image() 在 css中设置 background-image 在 html中使用img标签引用图片 需要一个合适的 loader,对图片进行处理 file-loader: 指示 webpack将所需对象作为文件发出并返回其公共URL url-loader: 以base64编码的URL加载文件,减少http请求. cnpm i file-loader url…

前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CDN的方式引入一个库,并通过 webpack在项目中优化 通过 expose-loader 内联配置 cnpm i jquery --save 安装 jquery库 import $ from 'jquery' console.log($) // 可以访问 console.log(window.$)…

前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel-loader.@babel/core.@babel/preset-env plugins: @babel/plugin-proposal-decorators --save-dev @babel/plugin-proposal-class-properties --save-dev @babel/…

前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要特定的 loader去解析它们. css-loader: 解析css文件并且支持@import()等引入css模块 style-loader: 通过插入 <style> 标记将CSS添加到DOM中 webpack 处理loader的是 module{}, 不要写成 loader: {} rules…

webpack打包各种javascript文件 (本文只是提供一个学习记录,大部分内容来自网络) 一,打包js文件和es6代码 1,webpack命令打包js文件 Tip: 在webpack4.x之前可以直接在命令行工具中使用webpack命令(全局安装了webpack),webpack4.x之后需要安装webpack-cli webpack --entry .\src\app.js --output ./src/b.js --mode development webpack --entry <…

webpack4 1,安装webpack npm insatll webpack --save-dev //安装最新版本 npm insatll webpack@<version> --save-dev //安装指定版本 如果你是webpack4+ 版本你必须还要安装webpack-cli,不然webpack打包时会提示安装webpack-cli或者报错(终端) One CLI for webpack must be installed. 安装webpack-cli: npm install…

webpack resolve属性 webpack 区分开发环境和生产环境 webpack resolve属性 该选项的作用是设置模块如何被解析. resolve.alias: 设置别名, 在vue中都是 @代表src目录. 也可以在key尾部添加$,精确匹配某一文件 resolve.enforceExtension: 引入的模块文件后面要不要带扩展名, true:一定要带, 默认为 false import foo from './foo' // ./foo.js 中的.js可以省略 reso…

webpack 小插件使用 webpack 监听文件变化配置 webpack 处理跨域问题 Webpack 小插件使用 clean-webpack-plugin: 用于在生成之前删除生成文件夹的Webpack插件 copy-webpack-plugin: 将单个文件或整个目录复制到生成目录 webpack.BannerPlugin内置插件: 给输出的文件头部插入注释信息 安装: npm i clean-webpack-plugin copy-webpack-plugin --save-dev w…

webpack 多页配置 webpack可以配置单页应用, 也可以配置多页应用. 区别在于, 单页应用entry入口只有一个, 而多页应用入口有多个 webpack配置: const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: "development", entry: { home: './src/home.index'…