亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

####webpack使用步驟

?###一,安裝

#1.npm init (進行初始化)

#2,按照提醒直接回車,創建一個webpack.json文件

#3,npm i vue webpack vue-loader

#4,按照那個 'peer' 安裝那個后面的模板

?### 二,創建文件

? ##1,創建src目錄,在其下創建文件app.vue 和 idnex.js

#index.js文件如下

// 入口文件:index.js

import Vue from 'vue';

import App from './app.vue';

const root=document.createElement('div');

document.body.appendChild(root)

new Vue({

// 聲明一個方法

render:(h)=>h(App)

}).$mount(root)

? ##2,在根目錄下新建webpack.config.js文件,并寫入以下代碼

// 為了在瀏覽器中打開,建立webpack這個文件

// 引入路徑

const path = require('path')

module.exports = {

// 文件的輸入

entry:path.join(__dirname,'src/index.js'),

//文件的輸出

output:{

filename:'bundle.js',

path:path.join(__dirname, 'dist')

},

<!-- 由于報錯:You may need an appropriate loader to handle this file type. 所以我們需要添加module屬性 -->

module:{

rules:[

{

test:/.vue$/, //此為正則表達式,目的是為了識別.vue結尾的文件

loader:'vue-loader'

}

]

}

}

? ##3,在package.json的scripts添加 build: webpack --config webpack.config.js 即

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build": "webpack --config webpack.config.js"

},

?###三,命令行

在終端中輸入 npm run build之后,會在根目錄下創建一個dist目錄,此目錄下面有一個bundle.js

#### 總結

webpack就是把不同的靜態資源的類型打包成一個js,然后我們在html中引入這個js的時候,然后我們的html里面的js就可以正常運行 ,然后去執行我們的操作.

因為我們在做前端項目的時候:

我們希望把很多零碎的js打包成一起,因為這樣可以減少http請求,同樣,我們希望使用模塊依賴,因為我們會做很多可復用的代碼,把它寫在一個模塊里去,這樣的話,我們在下一次有新項目的時候,可以再去使用原來的模塊,而不需要再把原來的代碼重寫一遍

除此之外,webpack還可以加載前端的所有文件,包括圖片和css.

cross-env 為不同的平臺設置統一的環境變量?

當出現 WARN 時把提示的包對應安裝好

onFocusChange 切換保存界面自動保存

npm i style-loader url-loader file-loader

不識別css，似乎缺什么css loader

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config

ERROR in ./src/app.vue 1:0

Module parse failed: Unexpected token (1:0)

You may need an appropriate loader to handle this file type.

> <template>

|? ? ?<div id="test">{{text}}</div>

| </template>

?@ ./src/index.js 2:0-27 8:21-24

使用當前項目里的webpack，而非全局的webpack

> "build": "webpack --config webpack.config.js"?

vscode的插件：

• eslint

• EditorConfig for VS Code

• gitignore

• language-stylus

• Nunjucks

• One Dark Pro

• Vetur

• 。。。
  

  
  

vscode 中代開命令行? 創建文件? npm init;

npm i webpack vue vue-loader

vue設定：在vue-loader處理當中，當組件要顯示的時候才加載樣式，這樣做的好處就是當異步加載組件的時候同時也把樣式給加載過來，可以節省流量

jsx語法與.vue的單文件語法各有各的好處，.vue結構更清晰組件化更強，而jsx語法則可以使用js的原生方法，更加靈活一些

前端什么？

postcss用來優化css的，通過一系列的組件來優化，如：autoprofixer,為css加前綴