Dilomen的博客

所有源码：https://github.com/Dilomen/webpack-setting前言：往往我们下载的依赖包都是用来import导入使用的，但是有些依赖，我们希望通过指令去执行它，比如一些配置文件，如webpack打包文件，这样就可以一次配置，应用多个项目注：以下代码只是做了一些简单的逻辑，一些错误判断都没有做，还有一些配置需要根据自己的项目进行修改首先创建bin和lib文...

import和export是ES6模块化的内容我们可以通过以下的方式来实现懒加载import('xxx.js').then(({default: x1}) => x())比如下面的例子：// add.jsfunction add(a, b) { console.log("a + b",2222)}export default add// index.j...

当我们写webpack的rule匹配规则进行打包时，往往会将一种类型的文件使用只一种打包loader方式当有时候我们需要对同一个文件类型进行两种不同方式的打包处理时，我们可以使用到webpack提供的oneOf{ test: /.svg$/, oneOf: [{ resourceQuery: /inline/, use: 'url-load...

全局安装npm install webpack -g本地安装npm install webpack webpack-cli -D入口：entry当只有一个JS文件被作为入口时entry: './src/index.js'webpack会从这个文件切入，将所有和这个文件有关的都一起打包比如该文件内有以下语句，那么webpack就会接着找test.js中相关部分：let s...

tip:虽然官方提供了create-react-app的方式来创建react项目，但是还是想用用webpack来搭建下，当然create-react-app也是建立在webpack上的，可以使用npm run eject来调取webpack的配置文件首先创建一个空文件夹，然后通过npm init初始化得到一个package.json文件如果不想一个个安装依赖包，直接复制以下的代码到pack...

在 github 创建了一个由 react 搭建的 UI 组件库，最初为了方便直接使用了 create-react-app 官方脚手架搭建了项目，虽然方便了，但是显得太臃肿以及不够灵活。因此自己使用 webpack 来重新搭建整个环境项目地址：https://github.com/Dilomen/Dark-Compontent通过 npm install dark-ui -D 指令进行安装...

— 在搭建前端项目时，开发环境和生产环境有时候需要不同的配置，所以就需要有个东西来判断当前环境来选择对应的配置首先在webpack.config.js中的插件plugins配置new Webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) }})...

在编写代码的时候，经常会出现同名而被覆盖样式的可能，所以添加css Modules可以减少这样的冲突！首先在webpack的配置文件中的rules加上一下代码，这是新的配置方式参考：https://github.com/rails/webpacker/issues/2197#issuecomment-517234086{ test: /\.css$/, exclude: ...