随笔分类 -  webpack

webpack学习摘要
Tree Shaking
摘要：Tree Shaking 只支持 import ES2015 import 这种静态引入 不支持require CommonJS 这种动态引入 前景提要： 当我们使用math.js文件的cube功能时，通常这样做： 我们只使用了math.js里面的cube但是用webpack打包 后出现下面这种情况 阅读全文
posted @ 2020-02-27 10:24 ladybug7 阅读(296) 评论(0) 推荐(0)
webpack中使用babel
摘要：step one: https://babeljs.io/setup Choose your tool (try CLI) select webpack Step two： npm install --save-dev babel-loader @babel/core module: { rules 阅读全文
posted @ 2020-02-26 11:00 ladybug7 阅读(1055) 评论(0) 推荐(0)
webpack 中使用 autoprefixer
摘要：webpack中autoprefixer是配合postcss-loader使用的，首先安装相应资源： npm i -D style-loader css-loader postcss-loader autoprefixer 在webpack.config.js中 const path = requi 阅读全文
posted @ 2020-02-25 10:33 ladybug7 阅读(2111) 评论(0) 推荐(0)
Hot Module Replacement [热模块替换]
摘要：安装了webpack-dev-server后 , 配置 "start": "webpack-dev-server" 然后运行 npm start 会开起一个web服务。 这时当我们的代码发生变化时，浏览器会自动刷新，显示变更后的代码所展示的内容。但是，这种情况下会将没有发生改变的部分也刷新，也就是全 阅读全文
posted @ 2020-02-18 11:22 ladybug7 阅读(608) 评论(0) 推荐(0)
html-webpack-plugin & clean-webpack-plugin
摘要：html-webpack-plugin Introduction： The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for 阅读全文
posted @ 2020-02-18 09:36 ladybug7 阅读(250) 评论(0) 推荐(0)
Using webpack-dev-server
摘要：官方讲解地址：https://webpack.js.org/guides/development/#using-webpack-dev-server The webpack-dev-server provides you with a simple web server and the abilit 阅读全文
posted @ 2020-02-17 16:35 ladybug7 阅读(111) 评论(0) 推荐(0)
Using Watch Mode
摘要：官方文档地址：https://webpack.js.org/guides/development/#using-watch-mode You can instruct webpack to "watch" all files within your dependency graph for chan 阅读全文
posted @ 2020-02-17 16:07 ladybug7 阅读(161) 评论(0) 推荐(0)
webpack中devtool的配置方案[开发模式]---[线上模式]
摘要：// 开发模式下 module.exports = { mode: 'development', devtool: 'cheap-module-eval-source-map' } // 线上模式下 module.exports = { mode: 'production', devtool: 'c 阅读全文
posted @ 2020-02-17 12:48 ladybug7 阅读(692) 评论(0) 推荐(0)
webpack的配置文件[webpack.config.js]
摘要：如果项目里没有webpack.config.js这个文件，webpack会使用它本身内置在源码里的配置项。 webpack.config.js这个配置名称可以通过指令修改 npx webpack --config xxx.js 或者 npm webpack --config xxx.js 阅读全文
posted @ 2020-02-05 14:28 ladybug7 阅读(250) 评论(0) 推荐(0)
webpack配置文件里loader的执行顺序：从下到上，从右到左; css-loader开启css模块化modules: true,
摘要：注释： options:{ importLoaders: 2 } 解决样式文件里使用@import 'xxx.xxx' 的问题 module: { rules: [{ test: /\.scss$/, use: [ 'style-loader', { loader: 'css-loader', op 阅读全文
posted @ 2020-02-04 16:11 ladybug7 阅读(2347) 评论(0) 推荐(0)
npm和npx
摘要：npx 指令会先在项目的node_modules里面找资源包 npm info 包名称 [查看资源包的信息] 阅读全文
posted @ 2020-02-04 12:07 ladybug7 阅读(147) 评论(0) 推荐(0)
package.json中一些配置项的含义
摘要：{ "name": "webpack-demo", "version": "1.0.0", "description": "learning webpack", "private": true, > 表示项目是私有的，不会发布到npm的线上仓库 "main": "index.js", > 向外暴露的 阅读全文
posted @ 2020-02-04 11:52 ladybug7 阅读(1759) 评论(0) 推荐(0)