webpack小白入門之基礎概念【1-1】

時間 2019-12-13

標籤 webpack 入門基礎概念 1-1 简体版

原文原文鏈接

環境搭建：安裝Node.js 和 NPM

安裝nvm github.com/nvm-sh/nvmjavascript

ps: nvm(Node.js Version Manager)也就是 Node.js 的包管理器，能夠經過它方便安裝和切換不一樣的Node.js版本。
複製代碼

Mac經過 curl 安裝：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bashhtml
Windows的安裝方法參考這裏java

檢查node和NPM版本安裝成功以下：node

環境搭建：安裝webpack和webpack-cli

建立空目錄和package.json

mkdir webpack.1-1
cd webpack.1-1
npm init -y

安裝 webpack 和 webpack-cli

npm install webpack webpack-cli --save-devwebpack
檢查是否安裝成功 cd node_modules.bin> webpack -vgit

在項目根目錄下建立一個webpack.config.js 文件github

'use strict';

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),// 打包的文件夾名
    filename: 'bundle.js'    // 打包的文件名
  },
  mode: 'production'

}
複製代碼

同時，在項目根目錄下，建立src文件夾及其子文件helloworld.js和index.jsweb

helloworld.jsnpm

export function helloworld() {
  return 'hello webpack';
}
複製代碼

index.jsjson

import { helloworld } from './helloworld';

document.write(helloworld());
複製代碼

這樣一個簡單的demo就完成了，在工程命令行中執行命令 webpack開始打包工程。

打包好的結果是這樣的：

因爲咱們打包出來的dist文件夾下面是沒有html文件的，因此咱們在dist文件夾下新建一個index.html文件，而後將bundle.js引進來。而後在瀏覽器中打開，一個簡單的demo效果就出來了。

總結一下：

'use strict';                                      

const path = require('path');                    
                                                   
module.exports = {                                     
  entry: './src/index.js', // 用來指定webpack的打包入口  // 若是是Windows電腦應該這樣配置 entry: '../../src/index.js',                 
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'    // 打包的文件名
  },
  mode: 'production'

}
複製代碼

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello Webpack</title>
</head>

<body>
  <script src="./bundle.js" type="text/javascript"></script>
</body>

</html>
複製代碼

下一篇 webpack小白入門【1-2】webpack的基本用法之相關核心概念

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。