博客的博客

1.首先初始化项目结构npm init包名随意填写好之后一路按回车，直到文件夹内生成 package.json 文件，在与package.json同级的目录下新建一个文件夹用于新建项目由于Node.js会自下而上的找包，所以我们把包安装在最外层（也就是package.json同级目录），让Node.js自己去找包，这样我们就只用安装一次包非常的方便。2.安装webpack相关包npm i webpack webpack-cli webpack-dev-server -Dnpm i h

devServer的一些配置项contentBase运行代码的目录contentBase:resolve(__dirname,'build')watchContentBase监视ContentBase目录下的所有文件，一旦文件发生改变就会重载watchContentBase:truewatchOptions监视文件watchOptions:{ //ignored，忽略某些文件，node_modules不需要监视 ignored:/node_modules/}compre

resolve是配置路径的规则，可以配置引入资源的默认路径alias配置解析路径别名原本要这样引入css文件和js文件的import './src/js/index.js'import './src/css/index.csss'非常不方便而且容易出错，如果需要引入很多个文件就需要写很多次但是可以通过配置解析模块路径别名来解决配置方法：resolve:{alias:{ $css:resolve(__dirname,'src/css'), $js:resolve(__dirna

如果在项目中引入了第三方资源，直接对项目进行打包的话，会把第三方资源也一起打包到入口文件中，这样会使得入口文件非常大。使用dll动态链接库可以把第三方资源和项目的入口分别打包。使用方法：1.首先在与webpack.config.js同级的目录下创建webpack.dll.js文件//webpack.dll.jsconst{resolve}=require('path')const webpack =require('webpack')module.exports={ entry:{

       如果在入口文件里引入了第三方资源然后直接打包的话，会把第三方资源也一起打包进去，这样的话打包出来的文件会变得很大。而且有时候引入的是CDN资源，不需要打包但是却被打包了，所以需要externals来排除不需要打包的资源。直接打包的后果，会把jquery也打包到文件中去使用externals进行排除const{resolve}=require('path')const HtmlWebPackPlugin=requi

oneOfwebpack原本的loader是将每个文件都过一遍，比如有一个js文件 rules中有10个loader，第一个是处理js文件的loader，当第一个loader处理完成后webpack不会自动跳出，而是会继续拿着这个js文件去尝试匹配剩下的9个loader，相当于没有break。而oneOf就相当于这个break用法rules:[ oneOf:[ { test:/\.css$/,

如果采用默认配置导入css的话 打包后是这样的css样式会被直接写入到html中去，可能会带来不必要的影响，这时候就需要把css单独分离出来首先要安装mini-css-extract-pluginpostcss-loaderpostcss-preset-envnpm i mini-css-extract-plugin postcss-loader postcss-preset-env -D然后配置webpack.config.jsconst{resolve}=require('path'

IE浏览器无法兼容es6语法，我们可以使用core-js进行兼容性处理，从而使IE浏览器也能够正常的解析es6语法比如const这个函数在Chrome中能够正常的执行而在IE中则不能执行使用core-js首先需要安装core-js、babel-loader和@babel/preset-envnpm i core-js babel-loader @babel/preset-env -D然后在webpack.config.js中配置core-js{

在Visaul Studio Code中无法使用webpack命令的问题webpack : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1。未对文件 C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1 进行数字签名。无法在当前系统上运行该脚本。有关运行脚本和...

2019年9月5日webpack-dev-server是一个非常强大的工具，能够自动检测到我们的代码更新并且自动打包当完成webpack的配置之后 -------->webpack的基本配置1.安装webpack-dev-server 在控制台输入 'npm i webpack-dev-server -y' ...

2019年9月4日webpack的基本配置当我们在控制台直接输入webpack执行命令的时候,webpack做了以下几步1.首先，webpack发现，我们并没有通过命令的形式，给他指定入口和出口2.webpack就会去项目的根路径中，查找一个叫做'webpack.config.js'的配置文件3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析完成配置文件后，就得到了...