webpack从零到一
丶久友
主要记录学习过程中的一些笔记,永远都是学了就忘,好记性不如烂笔头!
展开
-
十一、webpack配置文件的抽离
开发时依赖一个文件、上线时依赖一个文件、然后还有一个公共的合并文件开发时用开发文件合并公共文件生产时用生产文件合并公共文件帮助我们对两个配置文件进行合并的依赖:npm install webpack-merge --save-dev抽离后代码:将生产环境的配置提取到生产环境的文件夹,然后与公共环境配置文件合并,在打包的时候指定这个文件为配置文件开发环境同理(详情看图中三四代码)...原创 2020-03-11 23:32:24 · 273 阅读 · 0 评论 -
十、webpack之plugin
webpack中的插件,对webpack现有的功能进行各种扩展,比如说打包优化、文件压缩等等loader和plugin的区别loader主要用于转换某些类型的模块、它是一个转换器plugin是插件、它是对webpack本身的扩展,是一个扩展器plugin的使用过程步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装);步骤二:在webpack...原创 2020-03-11 22:29:53 · 111 阅读 · 0 评论 -
九、webpack支持.vue文件
安装包:npm install vue-loader vue-template-compiler --save-dev配置webpack环境: // 支持.vue配置 { test: /\.vue$/, use: [ { ...原创 2020-03-11 17:41:14 · 206 阅读 · 0 评论 -
八、webpack中vue的引入
#1.安装vue:npm install vue --save然后在min.js文件中加以引入html文件中写个div标签id等于appmin.js// 使用vue进行开发import Vue from 'vue'const App = { template: ` <div> <h2>{{message}}</h2>...原创 2020-03-11 17:20:33 · 129 阅读 · 0 评论 -
七、webpack-ES6转ES5 babel-loader
babel-loader中文官网地址:安装:npm install babel-loader@7 babel-core babel-preset-es2015 --save-dev配置代码: // 官网直接复制 { test: /\.js$/, exclude: /(node_modules|...原创 2020-03-11 15:51:48 · 317 阅读 · 0 评论 -
六、webpack-图片文件的处理
先来中文网链接url-loader安装npm install --save-dev url-loader配置:#1.当图片小于limint时的配置,但是当图片大于limit时打包会报错所以还需要进一步配置const path = require('path')module.exports = { entry: './src/min.js', //入口 output...原创 2020-03-11 14:40:25 · 317 阅读 · 0 评论 -
五、(二)webpack配置less、scss、stylus
官网写的还是比较详细:webpack-loaders首先,新建的webpack项目应当支持了css模块引入和挂载到页面的能力只需要安装css-loader和style-loader这两个功能const path = require('path')module.exports = { entry: './src/min.js', //入口 output: { ...原创 2020-03-11 13:27:59 · 368 阅读 · 0 评论 -
五、webpack中配置解析css模块,配置loader
安装所有css需要在index.js文件中使用require(’./index.css’);require(’./index.less’);npm install style-loader css-loader -D详情参考注释----1---- ----2----解析less文件参考注释----3----默认会把css写到页面style里,把css抽离成文件用link的方式引入---...原创 2020-03-11 13:05:39 · 616 阅读 · 0 评论 -
webpack为什么当前文件夹安装了webpack使用webpack命令却无法找到
cmd命令行工具无论在哪个文件夹下面使用,默认都是使用全局的node_modules因为是本地文件夹安装没有安装全局webpack,所以找不到解决:#1.全局安装webpack(不建议)#2.使用package.json文件,在scripts中添加相应指令,然后用npm run **(指令) 运行,如npm run build(如图:)就相当于输入webpack,因为在package.js...原创 2020-03-11 11:59:02 · 1874 阅读 · 0 评论 -
四、webpack配置生产环境下压缩html文件
当配置成生产环境后,打包的js文件会被压缩,但是html文件默认不会被压缩需要手动配置// webpack 是node写出来的 node的写法let path = require('path');// console.log(path.resolve('dist'))let HtmlWebpackPlugin = require('html-webpack-plugin');mod...原创 2020-02-28 15:25:47 · 527 阅读 · 0 评论 -
三、webpack打包怎么指定index.html为网页模板
打包后,把打包后的文件塞到html里面,并把结果放到webpack打包输出后的文件夹下面怎么指定src下的html文件1.安装webpack的html插件npm install html-webpack-plugin -D详情见1与2注释// webpack 是node写出来的 node的写法let path = require('path');// console.log(pat...原创 2020-02-28 15:09:11 · 2364 阅读 · 0 评论 -
二、webpack-dev-server静态服务配置
下载npm install -g webpack-dev-server -D然后在终端运行npx webpack-dev-server在本地内存中生成文件打包地址可是网址展示的信息并不是想展示的页面,这时候就需要对webpack进行开发服务器的配置1.在package.json中的scripts里配置快捷启动方式例如:"dev":"webpack-dev-server"下次想要运行命令...原创 2020-02-28 13:12:33 · 767 阅读 · 1 评论 -
一、webpack的基础配置
安装webpack1.npm install -g webpack -D2.npm install -g webpack-cli -D在终端运行npx webpack默认打包配置webpack.config.js通过npx webpack执行打包命令// webpack 是node写出来的 node的写法let path=require('path');// console.log...原创 2020-02-26 16:32:07 · 103 阅读 · 0 评论