webpack学习笔记 ——篇2

 

插件整理

extract-text-webpack-plugin	用于将css/less/sass等文件单独打包       https://webpack.docschina.org/plugins/extract-text-webpack-plugin/#src/components/Sidebar/Sidebar.jsx	1.引入 2.配置loader style-loader用于为css包一层Js，以插入到html中，这里不用。 3.定义插件 打包好的css即为styles.css
vue-loader	https://vue-loader.vuejs.org/guide/#manual-configuration
cross-env	用于跨平台设置环境变量，好比process.env.NDOE_ENV，以根据不一样的值进行不一样的配置   https://www.npmjs.com/package/cross-env	1.安装：npm i cross-env --save-dev 2.package.json脚本中配置命令： 至关于：经过cross-env设置proccess.env.NODE_ENV为development，并运行webpack命令。
webpack.DefinePlugin	用于在业务代码中，和在webpack编译过程当中，设置全局变量； vue、react等包括好几个版本（好比开发版本会包含不少错误提示等），webpack根据这些变量名肯定该打包哪一个版本。   https://webpack.docschina.org/plugins/define-plugin/   注意：cross-env是设置node运行环境中的process对象，但在业务代码中（好比main.js）无发判断这个值， 这个插件将这个值配置到业务代码的全局环境中。	1.引入webpack   2.配置插件
stylus-loader	用于编写stylus格式css（相应于less/sass）	1.安装stylus-loader 2.配置 { 　　test: /\.styl/, 　　use: ["style-loader","css-loader", 　　"stylus-loader"] },
autoprefixer	用于自动添加css前缀，不用写-webkit-/-moz-等一大串。 postcss-loader用于对翻译好的css进行优化，经过一些插件完成，autoprefixer就是其中一个。	1.建立postcss.config.js并配置： 2.
babel-loader	处理vue中的jsx格式	1.下载babel-core/babel-loader/babel-preset-env/babel-plugin-transform-vue-jsx 2.配置babel，建立.babelrc 3.配置webpack.config.js
optimization.splitChunks	用于分离第三方库
rimraf	用于删除目录的工具包 注意：直接在cmd命令行执行： rimraf dist 提示rimraf不识别，须要在package.json中配置命令并经过npm run ***执行
babel-preset-stage-1	用于识别es6等更高级语法，或还在草案中的语法，好比对象扩展符号...	1.npm install babel-preset-stage-1 --save-dev 2..babelrc文件中presets数组中添加"stage-1"
vue-server-renderer	vue服务端渲染必需的插件，生成独立的json，用于配置复杂的逻辑。正因有这个插件，vue的服务端渲染比react容易
koa-router	kou中间件，帮助koa处理路由信息
axios	用于应用向服务端发送请求
memory-fs	和node中的fs基本相同，惟一区别：对于读取的文件，node中的fs存到磁盘上，memory-fs存到内存
optimize-css-assets-webpack-plugin	用于压缩extract-text-webpack-plugin生成的css文件	1.引入 2.配置

 

 

cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js

命令对应的开发环境下配置：

不设置hot:true，会是页面总体更新，已经写进去的数据也会没有，

设置后，只是有改动的模块更新。