webpack4入門操做

時間 2019-12-12

標籤 webpack4 webpack 入門简体版

原文原文鏈接

基於webpack4實踐：
開始：打開控制面板，新建一個文件，進入該文件 -初始化package.jsonhtml

$ mkdir tmp/webpack-demo
$ cd webpack-demo
$ npm init -y

打開文件，下面多出一個package.json的文件：webpack

接着在webpage-demo文件下，安裝webpack,查看webpack版本web

npm install -D webpack
npx webpack --version

在webpack4 已經將 webpack 命令行相關的內容都遷移到 webpack-cli，除了webpack 外，咱們還須要安裝 webpack-cli：npm

npm install -D webpack-cli

如今直接執行json

webpack

出現以下錯誤:瀏覽器

緣由在於：沒有設定 mode，這是 webpack 4 引入的，有倆種模式，development 與 production，默認爲 production
入口模塊不存在 - webpack 4 默認從項目根目錄下的 ./src/index.js 中加載入口模塊，因此咱們或者新建一個 src/index.js 文件，或者指定一個入口文件

安裝lodashapp

npm install --save lodash

咱們新建一個src/index.js 參照官網操做：ui

import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');

return element;
 }
document.body.appendChild(component());

而後咱們新建一個./dist/index.html文件this

<!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
   </head>
   <body>
    <script src="main.js"></script>
   </body>
  </html>

執行npx webpack，
此時dist文件夾下會出現mian.js文件spa

你的輸出可能會有所不一樣，但若是構建成功，那麼你很好。另外，不要擔憂警告，咱們稍後會解決。

打開dist/index.html在瀏覽器中打開，若是一切順利，您應該看到如下文本：
'Hello webpack'。

目前，文件目錄結構

模塊

從版本4開始，webpack不須要任何配置，但大多數項目都須要更復雜的設置，這就是webpack支持配置文件的緣由。這比在終端中手動輸入許多命令更有效率，所以咱們建立一個替換上面使用的CLI行選項：

在項目下新建一個webpack.config.js文件寫入

const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
 }
};

如今，讓咱們再次運行構建，而是使用咱們的新配置文件

npx webpack --config webpack.config.js

此時dist文檔下出現一個bundle.js的文件,修改dist/index.html 改爲引入bundle.js

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

瀏覽器中打開index.html，仍能夠出現文本：'Hello webpack'。

配置文件比簡單的CLI使用更靈活。咱們能夠用這種方式指定加載器規則，插件，解析選項和許多其餘加強。請參閱配置文檔瞭解更多信息。

npm

因爲從CLI運行webpack的本地副本並非特別有趣，咱們能夠設置一個小捷徑。讓咱們經過添加一個npm腳本調整咱們的package.json：

控制檯執行：

npm run build

如今該npm run build命令能夠用來代替npx咱們以前使用的命令。

自定義參數能夠經過在npm run build命令和參數之間添加兩個破折號傳遞給webpack ，例如npm run build -- --colors。

下一步目標：查看基本概念和配置頁面。此外，API部分深刻了webpack提供的各類接口。

1. webpack4入門篇
2. webpack4入門
3. webpack4 入門（一）
4. Webpack4 一、入門
5. webpack4 入門（二）
6. webpack4+入門使用
7. webpack4入門配置
8. webpack4入門實例
9. Git入門操做
10. Kafka入門操做
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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