Webpack3簡單入門1

時間 2019-12-10

標籤 webpack3 webpack 簡單入門简体版

原文原文鏈接

使用 yarn 測試 webpack 的使用教程。javascript

本工程代碼css

建立工程

$ mkdir test-webpack-app-yarn
$ cd test-webpack-app-yarn
$ yarn init
# ...

安裝 webpack

$ yarn add webpack

# 新建一個 webpack 配置文件
$ touch webpack.config.js

# 內容：
module.exports = {
  entry: [
    './index.js'
  ],
  output: {
    path: __dirname,
    filename: 'bundle.js'
  }
}

添加工程內容

# index.js
$ touch index.js

# 內容：
document.write("Hello world, Webpack!")

# index.html
$ touch index.html

# 內容：
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, Webpack</title>
  </head>
  <body>
    <div id="app" />
    <script src="bundle.js" type="text/javascript"></script>
  </body>
</html>

編譯運行

$ yarn run webpack
$ open index.html -a Google\ Chrome

說明

若是過程當中發生錯誤，yarn會在工程根目錄下自動生成yarn-error.log文件。html

關於 yarnjava

1. Webpack3簡單入門2
2. jquery簡單入門1
3. Springmvc 簡單入門1
4. 1、MyBatis簡單入門
5. Dubbo簡單入門【1】
6. Vuex簡單入門1：一個小demo
7. Git入門介紹-1-簡單介紹
8. 微信小程序簡單入門1
9. ARM NEON 編程簡單入門1
10. hibernate基礎簡單入門1---helloword
更多相關文章...
• Memcached入門教程 - NoSQL教程
• ionic 表單和輸入框 - ionic 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索