webpack的学习笔记

1.关于webpack配置遇到的错误： 

生产阶段 ：代码进行了压缩

 

开发阶段 ：   代码没有进行压缩

 

2.关于webpack配置时entry可以放一个多个入口文件，关于出口文件output的filename命名[name].js / [name].[hash:5].js / [name].[chunkhash:5] .js的不同用法，[name].[chunkhash:5] .js解决了每次打包生成的js文件名称不一致。

 

 

3.将webpack.config.js 配置文件放到一个单独scritpts文件时需要在package.json中配置下面相应的配置：

4.但是之后存在一种dist文件的生成路径的 问题:

     process.cwd() 是当前Node.js进程执行时的文件夹地址——工作目录，保证了文件在不同的目录下执行时，路径始终不变

     __dirname 是被执行的js 文件的地址 ——文件所在目录

 

5. 单独打包css ,用到的插件，在webpack4.0之后需要用到的

mini-css-extract-plugin在webpack4中代替extract-text-webpack-plugin，此插件是将 CSS 样式提取到单独的文件中。 它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。即通过 JS 文件中import进来的样式文件。它支持CSS和SourceMaps的按需加载。

是建立在新的webpack v4功能（模块类型）之上，并且需要在webpack 4版本才能工作。

相比extract-text-webpack-plugin：

• 异步加载
• 没有重复的编译（性能）
• 更容易使用
• 特定于CSS

 

7. 选择器加上前缀，浏览器兼容  postcss-loader 和autoprefixer的配合使用

 

 

8. 比如解决样式的时候关于浏览器的兼容性，比如：display：flex     用到到的Browserslist，需要在package.json文件配置相应的需求，