webpack小结

trigkit4 发布于2019-08-26 10:10 / 2123人阅读

摘要：安装文件夹出现使用解析不了解决使用处理指定出口入口指定处理的文件不想手动指定入口与出口文件就创建指定入口出口将出口入口暴露使用打包首先发现没有指定入口与出口寻找文件找到配置后解析执行，找到配置对象拿到对象后，进行打包安装实现自动打包编

npm i 安装node_moudles
文件夹

dist
src 
    css
    js
    image
    main.js
    index.html
webpack.config.js
package.json

npm init -y 出现package.jsoon

1.使用import $ from "jquery"解析不了

解决：
1.使用webpack处理
webpack .srcmain.js .distundle.js 指定出口入口
2.指定处理的文件
不想手动指定入口与出口文件就创建
webpack.config.js
指定入口出口.将出口入口暴露
使用webpack打包

2.1.首先发现没有指定入口与出口
2.2寻找webpack.config.js文件
2.3找到配置后解析执行，找到配置对象
2.4拿到对象后，进行打包

2.安装 webpack-dev-server实现自动打包编译

npm i webpack-dev-server -D

node nodemon
webpack webpack-dev-server
实时加载
配置package.json
script
dev:"webpack-dev-server"

注意要先安装
npm -i webpack -D

3.没有出现效果，在html中引入的js路径不对

在webpack-dev-server打包的没有在本地磁盘上，托管到项目的内存中
和dist src 同级

4.修改端口，指定首页 --hot 及时更新，没有编译打包，更新少量的代码

配置hot的两种方式
4.1 在 package.json中配置

 "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server  --open --port 3000  --contentBase src --hot"
  },

    --open  打开浏览器
    --port 3000 指定端口号
    --contentBase src 开始默认路径
     --hot  热更新
     
    4.2.三步走 

     1.引入webpack模块
     var webpack=require("webpack")
     2. devServer:{
            contentBase:"./src",  //设置服务器访问的基本目录
            host:"localhost", //服务器的ip地址
              port:8080,  //端口
                open:true, //自动打开页面
                hot: true
                },
    3.在插件中配置
        plugins:[
              new webpack.HotModuleReplacementPlugin()
            ]

5.将页面放入到内存中

npm i html-webpack-plugin -D 这样早页面中就不用引入js

在webpack.config.js配置插件
插件自动创建一个合适的script 并且引用

6.使用import 导入 css

安装loader

7.在css样式中引入url地址不管是图片还是字体库

npm i url-loader file-loader -D

还是在loader中配置规则，如第六点

8. 有.babelrc,语法转化

1.安装下载相关的包
2.添加一个.babelrc配置文件

{
    "presets":["@babel/preset-env"]
}

3.在webpack.config.js中配置相应的规则，注意排除
node_modules下的文件，否则很耗内存

 {
      test:/.js$/,
      exclude:/node_modules/,
      use:"babel-loader"
    }

npm install --save * //会下载到node_modules目录中，会修改package.json dependencies会增加
npm install --save-dev **//会下载到node_modules目录中，会修改package.json ,devDependencies会增加
npm install **// 会下载到node_modules目录中，不会修改package.json
npm install //会默认安装两种依赖
npm install * --save //会下载到node_modules目录中，会修改package.json dependencies会增加

私有云云服务器设计小结对象小结个人小结小结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105709.html

Webpack 3一些代码体积优化方案的小结

摘要：表示生成一个懒加载的，只有当需要时才会被加载。主要是作用域提升，将所有模块放在同一个作用域当中，一方面能提高运行速度，另一方面也能降低文件体积。前提是你的代码是用模块写的。参考文章学习小结前言之前接手公司一个前端项目，开发了几个月后越来越难以忍受项目结构的混乱和打包体积的臃肿（脚手架和基本功能代码都是从公司的其他项目复制过来的），如果不立即进行重构，难以想象以后要怎么维护各个产品线...

taowen 2019-08-22 18:20 评论0 收藏0
webpack 构建性能优化策略小结

摘要：但是，随者工程开发的复杂程度和代码规模不断地增加，暴露出来的各种性能问题也愈发明显，极大的影响着开发过程中的体验。对应的资源也可以直接由页面外链载入，有效地减小了资源包的体积。背景如今前端工程化的概念早已经深入人心，选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配，而在诸多的构建工具中，webpack以其丰富的功能和灵活的配置而深受业内吹捧，逐步取代了grunt和gu...

hiYoHoo 2019-08-21 11:21 评论0 收藏0
面试小结（四）

摘要：对于像网易这种大公司，我是很向往的。希望以后自己的技术精进了，能进这样的大公司。也希望路过的人，通过自己的努力，不负好时光今天发现，原来这篇文章没有发出去，今天我就再发一遍咯 1、场景开发：移动端飘雪场景实现；2、rem布局的原理；3、Rem布局和vh,vw布局那种更火；4、Position定位的几个属性和用法；5、使用rem布局的问题；6、使用rem布局，移动和pc是否可以用同一套样...

cuieney 2019-08-29 16:24 评论0 收藏0
面试小结（四）

摘要：对于像网易这种大公司，我是很向往的。希望以后自己的技术精进了，能进这样的大公司。也希望路过的人，通过自己的努力，不负好时光今天发现，原来这篇文章没有发出去，今天我就再发一遍咯 1、场景开发：移动端飘雪场景实现；2、rem布局的原理；3、Rem布局和vh,vw布局那种更火；4、Position定位的几个属性和用法；5、使用rem布局的问题；6、使用rem布局，移动和pc是否可以用同一套样...

singerye 2019-08-26 12:11 评论0 收藏0