成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack小結(jié)

trigkit4 / 2245人閱讀

摘要：安裝文件夾出現(xiàn)使用解析不了解決使用處理指定出口入口指定處理的文件不想手動指定入口與出口文件就創(chuàng)建指定入口出口將出口入口暴露使用打包首先發(fā)現(xiàn)沒有指定入口與出口尋找文件找到配置后解析執(zhí)行，找到配置對象拿到對象后，進(jìn)行打包安裝實現(xiàn)自動打包編

npm i 安裝node_moudles
文件夾

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

npm init -y 出現(xiàn)package.jsoon

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

解決：
1.使用webpack處理
webpack .srcmain.js .distundle.js 指定出口入口
2.指定處理的文件
不想手動指定入口與出口文件就創(chuàng)建
webpack.config.js
指定入口出口.將出口入口暴露
使用webpack打包

2.1.首先發(fā)現(xiàn)沒有指定入口與出口
2.2尋找webpack.config.js文件
2.3找到配置后解析執(zhí)行，找到配置對象
2.4拿到對象后，進(jìn)行打包

2.安裝 webpack-dev-server實現(xiàn)自動打包編譯

npm i webpack-dev-server -D

node nodemon
webpack webpack-dev-server
實時加載
配置package.json
script
dev:"webpack-dev-server"

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

3.沒有出現(xiàn)效果，在html中引入的js路徑不對

在webpack-dev-server打包的沒有在本地磁盤上，托管到項目的內(nèi)存中
和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 開始默認(rèn)路徑
     --hot  熱更新
     
    4.2.三步走 

     1.引入webpack模塊
     var webpack=require("webpack")
     2. devServer:{
            contentBase:"./src",  //設(shè)置服務(wù)器訪問的基本目錄
            host:"localhost", //服務(wù)器的ip地址
              port:8080,  //端口
                open:true, //自動打開頁面
                hot: true
                },
    3.在插件中配置
        plugins:[
              new webpack.HotModuleReplacementPlugin()
            ]
5.將頁面放入到內(nèi)存中

npm i html-webpack-plugin -D 這樣早頁面中就不用引入js

在webpack.config.js配置插件
插件自動創(chuàng)建一個合適的script 并且引用

6.使用import 導(dǎo)入 css

安裝loader

7.在css樣式中引入url地址 不管是圖片還是字體庫

npm i url-loader file-loader -D

還是在loader中配置規(guī)則，如第六點

8. 有.babelrc,語法轉(zhuǎn)化

1.安裝下載相關(guān)的包
2.添加一個.babelrc配置文件

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

3.在webpack.config.js中配置相應(yīng)的規(guī)則，注意排除
node_modules下的文件，否則很耗內(nèi)存

 {
      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 //會默認(rèn)安裝兩種依賴
npm install * --save //會下載到node_modules目錄中，會修改package.json dependencies會增加

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105709.html

相關(guān)文章

  • Webpack 3一些代碼體積優(yōu)化方案的小結(jié)

    摘要：表示生成一個懶加載的，只有當(dāng)需要時才會被加載。主要是作用域提升，將所有模塊放在同一個作用域當(dāng)中，一方面能提高運行速度，另一方面也能降低文件體積。前提是你的代碼是用模塊寫的。參考文章學(xué)習(xí)小結(jié) 前言 之前接手公司一個前端項目，開發(fā)了幾個月后越來越難以忍受項目結(jié)構(gòu)的混亂和打包體積的臃腫（腳手架和基本功能代碼都是從公司的其他項目復(fù)制過來的），如果不立即進(jìn)行重構(gòu)，難以想象以后要怎么維護(hù)各個產(chǎn)品線...

    taowen 評論0 收藏0

  • webpack 構(gòu)建性能優(yōu)化策略小結(jié)

    摘要：但是，隨者工程開發(fā)的復(fù)雜程度和代碼規(guī)模不斷地增加，暴露出來的各種性能問題也愈發(fā)明顯，極大的影響著開發(fā)過程中的體驗。對應(yīng)的資源也可以直接由頁面外鏈載入，有效地減小了資源包的體積。 背景 如今前端工程化的概念早已經(jīng)深入人心，選擇一款合適的編譯和資源管理工具已經(jīng)成為了所有前端工程中的標(biāo)配，而在諸多的構(gòu)建工具中，webpack以其豐富的功能和靈活的配置而深受業(yè)內(nèi)吹捧，逐步取代了grunt和gu...

    hiYoHoo 評論0 收藏0

  • 面試小結(jié)（四）

    摘要：對于像網(wǎng)易這種大公司，我是很向往的。希望以后自己的技術(shù)精進(jìn)了，能進(jìn)這樣的大公司。也希望路過的人，通過自己的努力，不負(fù)好時光今天發(fā)現(xiàn)，原來這篇文章沒有發(fā)出去，今天我就再發(fā)一遍咯 1、場景開發(fā)：移動端飄雪場景實現(xiàn)；2、rem布局的原理；3、Rem布局和vh,vw布局那種更火；4、Position定位的幾個屬性和用法；5、使用rem布局的問題；6、使用rem布局，移動和pc是否可以用同一套樣...

    cuieney 評論0 收藏0

  • 面試小結(jié)（四）

    摘要：對于像網(wǎng)易這種大公司，我是很向往的。希望以后自己的技術(shù)精進(jìn)了，能進(jìn)這樣的大公司。也希望路過的人，通過自己的努力，不負(fù)好時光今天發(fā)現(xiàn)，原來這篇文章沒有發(fā)出去，今天我就再發(fā)一遍咯 1、場景開發(fā)：移動端飄雪場景實現(xiàn)；2、rem布局的原理；3、Rem布局和vh,vw布局那種更火；4、Position定位的幾個屬性和用法；5、使用rem布局的問題；6、使用rem布局，移動和pc是否可以用同一套樣...

    singerye 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<