webpack小結

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 .\src\main.js .\dist\bundle.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

<script src="./bundle.js"></script>

在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.jsonnpm install //會默認安裝兩種依賴npm install * --save //會下載到node_modules目錄中，會修改package.json dependencies會增長