Webpack3簡單入門2

時間 2019-11-16

標籤 webpack3 webpack 簡單入門简体版

原文原文鏈接

本工程代碼css

建立工程

$ yarn init
$ yarn add webpack

# **添加工程文件：**
# public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

# src/app.js:
document.querySelector("#root").appendChild(hello());

# src/hello.js
module.exports = function() {
  var hello = document.createElement('div');
  hello.textContent = "Hello World!";
  return hello;
}

# webpack
$ yarn run webpack src/app.js public/bundle.js
$ open public/index.html

經過配置文件來使用 webpack

添加 webpack.config.js 文件。以下：html

module.exports = {
  entry:  [
    "./src/app.js", // 已屢次說起的惟一入口文件
  ],
  output: {
    path: __dirname + "/public", // 打包後的文件存放的地方
    filename: "bundle.js" // 打包後輸出文件的文件名
  }
}

__dirname 是 node.js 中的一個全局變量，它指向當前執行腳本所在的目錄node

接下來只要執行 $ yarn run webpack 便可。react

配置執行腳本命令

在 package.json 中添加：webpack

"scripts": {
  "start": "webpack"
},

接下來能夠執行 $ yarn start 便可編譯打包。git

使用 webpack 構建本地服務器

若是想讓瀏覽器監聽文件的修改，自動刷新。webpack 提供了 webpack-dev-server 來實現這個功能。github

yarn add webpack-dev-server

在 webpack.config.js 中配置：web

devServer: {
  contentBase: "./public",  // 本地服務器所加載的頁面所在的目錄
  historyApiFallback: true, // 不跳轉
  inline: true // 實時刷新
}

在 package.json 中配置腳本命令json

"scripts": {
  "server": "webpack-dev-server --open"
}

接下來能夠執行 $ yarn server 便可打開並監聽了。瀏覽器

使用 Loaders

想要 webpack 能分析編譯 css 等其餘文件，須要使用各類 loader 支持。（對 json，webpack 已經內置了處理器。）

添加對 css 支持：

# 安裝依賴
    $ yarn add css-loader style-loader

安裝完 loader 須要 webpack.config.js 中添加「module」配置。

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: "style-loader" }, // style-loader 寫前面，不然報錯 -_-!!
        { loader: "css-loader" }
      ]
    }
  ]
  // test: 匹配文件拓展名（必須）
  // use: 使用的 loader 的名稱（必須）
},

從新編譯，便可支持了 css 樣式。

添加對 React，JSX 支持：

# 安裝 babel 依賴
$ yarn add babel-core babel-loader babel-preset-env babel-preset-react

# webpack.config.js 添加 module
{
  test: /(\.jsx|\.js)$/,
  use: {
    loader: "babel-loader",
    options: {
      presets: [ "env", "react"]
    }
  },
  exclude: /node_modules/
}

# 安裝 react, react-dom
$ yarn add react react-dom

# 加入 JSX 的 Happy.js
import React, {Component} from 'react';

class Happy extends Component {
  render() {
    return (
      <div className='Happy'>
        <h2> I am happy! </h2>
      </div>
    );
  }
}

export default Happy;

# 修改 app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Happy from './Happy';
import './style.css';
const hello = require('./hello.js');

ReactDOM.render(
  <Happy />,
  document.getElementById('root')
);

document.querySelector("#root").appendChild(hello());

從新編譯後，就能夠看到咱們添加的 Happy 了。

對 Babel 的配置：

能夠爲 babel 新建一個 ‘.babelrc’ 來單獨配置 babel

# .babelrc:
{
  "presets": [ "env", "react"]
}

# webpack.config.js 去除 babel-loader 下的 options

使用插件

插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。能夠用來處理各類各樣的任務。

使用 html-webpack-plugin, 它會自動幫你生成一個 html 文件，而且引用相關的 assets 文件(如 css, js)。

# 安裝庫
$ yarn add html-webpack-plugin

# 修改 webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
...
  output: {
    path: path.resolve(__dirname, "build"), // 打包後的文件存放的地方
    filename: "bundle.js" // 打包後輸出文件的文件名
  },
...
  devServer: {
    contentBase: "./build",  // 本地服務器所加載的頁面所在的目錄
...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/index.tmpl.html")
    })
  ]
};

再編譯'''$ yarn start'''。能夠看到目錄下生成了「build/」。

參考
https://doc.webpack-china.org...
https://www.jianshu.com/p/42e...

1. Webpack3簡單入門1
2. Spring Boot 2 整合Swagger簡單入門
3. Specflow入門-（2）簡單case的實現
4. Neo4j學習（2）--簡單入門
5. LVS 簡單入門DR模式(2)
6. Dubbo入門(2) - 簡單實踐
7. git簡單入門
8. NPM簡單入門
9. Kafka簡單入門
10. ECharts簡單入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• ionic 表單和輸入框 - ionic 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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