qq_36967515的博客

React学习

npm install --save-dev babel-loader @babel/corenpm install @babel/preset-env --save-dev // 语法转义npm install --save @babel/polyfill // 往低版本浏览器中添加缺失的js对象和方法module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, // 第三方.

1、在打包的时候如果每次运行都需要执行打包命令，会显的比较麻烦，这个时候可以在package.json中配置 --watch 启动监听， 但是如果想要深层次的操作，比如自动打开浏览器，就要启用devserver这个配置了。"scripts": { "start": "webpack-dev-server" },const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin')

sourceMap是一个映射关系，比如代码写错，但是打包成功，在程序运行时发现错误，提示的错误却是在打包后的js文件中，那我们如何将报错信息提示到本地文件中const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = { mode

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = { mode: 'development', entry: { main: './src/index.js', sub: './src/index.js' }, .

我们在执行了npm init之后， 需要在项目内安装webpacknpm install webpack@4.26.0 webpack-cli@3.1.2 -D 默认安装最新的，我这是安装了指定版本，并没有全局安装，全局安装会出现不同的项目因为webpack版本不一致问题导致打包失败，安装完成npx webpack -v 查看版本webpack打包都会有一个默认的配置文件 ，官方使用的是webpack.config.js 但是这个也可以更改使用 npx webpack --...

loader让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。在 webpack 的配置中，loader有两个属性：test属性，识别出哪些文件会被转换。 use属性，定义出在进行转换时，应该使用哪个 loader。const path = require('path');module.exports = { output: { filename: 'my-first-webpack.bundle.js',...

file-loadermodule: { rules: [{ test: /\.(jpg|png|gif)$/, use: { loader: 'file-loader', options: { // placeholder 占位符 name: '[name]_[hash].[ext]', // 打包出来的图片以原来的名字加hash值来命名 outputPath: 'img/' // 打包的文件在dist文件夹下的img文件夹中 } .

npm install --save-dev html-webpack-pluginnpm install --save-dev clean-webpack-pluginconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin')module.exports = {.