轉載：https://m.imooc.com/wenda/detail/601318
vue create 是vue-cli3.x的初始化方式，
目前模板是固定的，模板選項可自由配置，創建出來的是vue-cli3的項目，與cue-cli2項目結構不同，配置方法不同，
vue init 是vue-cli2.x的初始化方式，
可以使用github上面的一些模板來初始化項目，webpack是官方推薦的標準模板名。vue-cli2.x項目向3.x遷移只需要把static目錄複製到public目錄下，老項目的src目錄覆蓋3.x的src目錄(如果修改了配置，可以查看文檔，用cli3的方法進行配置)
處理靜態資源你也許會注意到vue-cli與webpack結合的項目中，我們通常會有兩個靜態資源的路徑：src/assets和static/，他們兩者的區別是什麼呢？打包的資源爲了回答這個問題，我們首先要明白Webpack是如何處理靜態資源的。在*.vue組件裏，所有的templates和CSS模塊都被vue-html-loader和css-loader解析來查找路徑URL。舉個例子，在<img src"./logo.png">和背景background: url(./logo.png)，”./logo.png”是一個相對路徑，會被Webpack當做一個依賴加載。但是因爲logo.png並不是JavaScript，所以如果被當成一個依賴的花，我們需要通過url-loader和file-loader來解析它。這個模板已經爲你配置了相應的loader，所以你通常不用擔心相對路徑的部署問題。即使這些資源有可能在構建過程中被內聯/拷貝/重命名，他們也是源碼重要組成部分。這就是爲什麼我們建議單獨在/src文件夾裏放置靜態資源，如同其他的資源文件夾。事實上，你都不必把他們全放在/src/assets，你可以根據模塊/組件來組織利用他們。比如說，你可以把任一組件放到他們自己的目錄，並在該目錄下存放靜態資源。資源引入規則相對路徑，比如 ./assets/logo.png會被解析成模塊依賴。它們會被一個基於你Webpack輸出配置的自動生成URL替代。沒有前綴的路徑，比如assets/logo.png，同相對路徑，轉義成./assets/logo.png有~前綴的路徑。 ~被認爲是一個模塊請求，同require('some-module/image.png')。根路徑，比如/assets/log.png在JavaScript得到資源路徑computed: { background () { return require('./bgs/' + this.id + '.jpg') } }這個資源路徑同樣會被file-loader處理然後返回處理後的路徑。而且Webpack會一次性加載該bgs目錄下的所有圖片。“真實的”靜態資源與此相對的，static/中的文件全都不會被Webpack處理。它們將被直接拷貝到目標文件夾，引用這些文件需要使用絕對路徑。
轉載：https://www.html.cn/archives/9436
webpack 4 已經發布了！
這個當今最流行的模塊打包器做了大量更新。
webpack 4 帶來了什麼是新特性？大規模的性能改進，零配置和智能的默認設置。
這篇文章是對 webpack 4 的生動的介紹。並且會不斷更新。
您可以按文章每個部分的順序構建一個有效的 webpack 4 環境。
但可以隨意跳過教程的某個部分！
webpack 4 作爲零配置模塊打包器
webpack 功能強大，具有許多獨特的功能，但其中一個難點就是配置文件。
爲中型到大型項目提供 webpack 配置並不是什麼大問題。 沒有它感覺你無法活了。然而，對於小一點的項目來說，這有點煩人，尤其是當你想啓動一些玩玩的應用的時候。
這就是爲什麼 Parcel 獲得了很多吸引的眼球。
現在是突發新聞：webpack 4 默認不需要配置文件！
讓我們嘗試一下。
webpack 4：從零配置開始
創建一個新目錄並進入該目錄：
CommandLine 代碼:
- mkdir webpack-4-quickstart && cd $_
通過運行以下命令初始化 package.json ：
CommandLine 代碼:
- npm init -y
並引入 webpack 4：
CommandLine 代碼:
- npm i webpack --save-dev
我們還需要 webpack-cli ，作爲一個單獨的包引入：
CommandLine 代碼:
- npm i webpack-cli --save-dev
現在打開 package.json 並添加一個 build(構建) 腳本：
package.json 代碼:
- "scripts": {
- "build": "webpack"
- }
關閉文件並保存。
嘗試運行：
CommandLine 代碼:
- npm run build
看看會發生什麼：
CommandLine 代碼:
- ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'
webpack 4 在 ./src 中尋找 entry point(入口點) ！ 如果您不知道這意味着什麼，請查看 官方的說明文檔 。
簡而言之： entry point(入口點) 是 webpack 尋找開始構建 Javascript 包的文件。
在以前版本的 webpack 中，必須在名爲 webpack.config.js 的配置文件中 通過 entry 屬性定義 entry point(入口點) 。
但是 從 webpack 4 開始，不再必須定義 entry point(入口點) ：它將默認爲 ./src/index.js ！
測試這個新功能很簡單。 創建 ./src/index.js：
index.js 代碼:
- console.log(`I'm a silly entry point`);
然後運行構建命令：
CommandLine 代碼:
- npm run build
您將在 ~/webpack-4-quickstart/dist/main.js 中獲取該 bundle(包) 。
什麼？ 稍等片刻。 沒有必要定義輸出文件？ 對的。
在 webpack 4 中，既不必須定義 entry point(入口點) ，也不必須定義 output file(輸出文件)。
webpack 的主要優勢在於 code splitting(代碼拆分）。 但請相信我，使用零配置工具可以加快速度。
所以這是第一條新聞：webpack 4 不是必須要有配置文件。
它將查找 ./src/index.js 作爲默認入口點。 而且，它會在 ./dist/main.js 中輸出模塊包。
在下一節中，我們將看到 webpack 4 的另一個不錯的功能：生產和開發模式。
webpack 4：production(生產) 和 development(開發) 模式
擁有2個配置文件在 webpack 中是的常見模式。
一個典型的項目可能有：
- 用於開發的配置文件，用於定義 webpack dev server 和其他東西
- 用於生產的配置文件，用於定義 UglifyJSPlugin，sourcemaps 等
雖然較大的項目可能仍然需要 2 個配置文件，但在 webpack 4 中，您可以在沒有一行配置的情況下完成。
怎麼會這樣？
webpack 4 引入了 production(生產) 和 development(開發) 模式。
事實上，如果你注意 npm run build 的輸出，你會看到一個很好的警告：
The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.
“模式”選項尚未設置。 將 “mode” 選項設置爲 “development” 或 “production” 以啓用此環境的默認值。
那是什麼意思？ 讓我們來看看。
打開 package.json 並填充 script 部分，如下所示：
package.json 代碼:
- "scripts": {
- "dev": "webpack --mode development",
- "build": "webpack --mode production"
- }
現在嘗試運行：
CommandLine 代碼:
- npm run dev
並看看 ./dist/main.js 。 你看到了什麼？ 是的，我知道，一個令人厭煩的 bundle(包) 文件…，沒有壓縮！
現在嘗試運行：
CommandLine 代碼:
- npm run build
再來看看 ./dist/main.js 。 你現在看到了什麼？ 一個 壓縮後的 bundle(包)！
是的!
production mode(生產模式) 可以開箱即用地進行各種優化。 包括壓縮，作用域提升，tree-shaking 等。
另一方面，development mode(開發模式)針對速度進行了優化，僅僅提供了一種不壓縮的 bundle 。
所以這是第二條新聞：webpack 4 引入了 production(生產) 和 development(開發) 模式。
在 webpack 4 中，您可以在沒有一行配置的情況下完成任務！ 只需定義 –mode 參數即可免費獲得所有內容！
webpack 4：覆蓋默認 entry(入口)/output(輸出)
我喜歡 webpack 4 零配置，但如何覆蓋默認 entry point(入口點) 和 默認 output(輸出) 呢？
在 package.json 中配置它們！
這是一個例子：
package.json 代碼:
- "scripts": {
- "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
- "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
- }
webpack 4：用 Babel 7 轉譯 Javascript ES6
現代 Javascript 主要是用 ES6 編寫的。
但並非每個瀏覽器都知道如何處理 ES6 。 我們需要某種轉換。
這個轉換步驟稱爲 transpiling(轉譯)。 transpiling(轉譯)是指採用 ES6 並使舊瀏覽器可以理解的行爲。
Webpack 不知道如何進行轉換但是有 loader(加載器) ：將它們視爲轉譯器。
babel-loader 是一個 webpack 的 loader(加載器)，用於將 ES6 及以上版本轉譯至 ES5 。
要開始使用 loader ，我們需要安裝一堆依賴項。 尤其是：
- babel-core
- babel-loader
- babel-preset-env 用於將 Javascript ES6 代碼編譯爲 ES5
我們開始動手吧：
CommandLine 代碼:
- npm i babel-core babel-loader babel-preset-env --save-dev
接下來，通過在項目文件夾中創建名爲 .babelrc 的新文件來配置 Babel ：
.babelrc 代碼:
- {
- "presets": [
- "env"
- ]
- }
此時我們有2個配置 babel-loader 的選項：
- 使用 webpack 的配置文件
- 在你的 npm scripts 中使用
--module-bind
是的，我知道你在想什麼。 webpack 4 將自己作爲零配置工具推向市場。 爲什麼要再次編寫配置文件？
webpack 4 中零配置的概念適用於：
- entry point(入口點) 默認爲
./src/index.js - output(輸出) 默認爲
./dist/main.js - production(生產) 和 development(開發) 模式 （無需爲生產和開發環境創建2個單獨的配置）
這就夠了。 但是對於在 webpack 4 中使用 loader(加載器)，您仍然需要創建配置文件。
我問過 Sean 這件事：webpack 4 中的加載器是否與 webpack 3 相同？ 有沒有計劃爲像 babel-loader 這樣的普遍使用的 loader(加載器) 提供零配置？
他的回答是：
“對於未來（在v4之後，可能是4.x或5.0），我們已經開始探索預置或附加系統將如何幫助定義它。我們不想要的是:嘗試將一堆東西作爲默認設置插入到 core 中，我們想要的是:允許其他人擴展“
現在你仍然必須依賴 webpack.config.js。 讓我們來看看…
webpack 4：通過配置文件使用 babel-loader
給 webpack 添加一個配置文件，以最經典的方式使用 babel-loader。
創建一個名爲 webpack.config.js 的新文件並配置 loader(加載器) ：
webpack.config.js 代碼:
- module.exports = {
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- use: {
- loader: "babel-loader"
- }
- }
- ]
- }
- };
除非您要自定義 entry point(入口點) ，否則無需指定它。
接下來打開 ./src/index.js 並編寫一些 ES6 代碼：
index.js 代碼:
- const arr = [1, 2, 3];
- const iAmJavascriptES6 = () => console.log(...arr);
- window.iAmJavascriptES6 = iAmJavascriptES6;
最後，創建 bundle(包)：
CommandLine 代碼:
- npm run build
現在看一下 ./dist/main.js 來查看轉換後的代碼。
webpack 4：不通過配置文件使用 babel-loader（在 npm scripts 中使用）
還有另一種方法來使用 webpack 的 loader(加載器)。
--module-bind 參數允許你在命令行指定加載器。 謝謝 Cezar 指出這一點。
該參數不是特定於 webpack 4 的。 從版本 3 開始就有了。
要在沒有配置文件的情況下使用 babel-loader ，請在 package.json 中配置你的 npm scripts，如下所示：
package.json 代碼:
- "scripts": {
- "dev": "webpack --mode development --module-bind js=babel-loader",
- "build": "webpack --mode production --module-bind js=babel-loader"
- }
你可以再出運行 npm run build 構建項目。
我不喜歡這種方法（我不喜歡增加 npm scripts 的複雜性），但它仍然很有趣。