webpack的簡單實例學習

時間 2019-12-14

標籤 webpack 簡單實例學習简体版

原文原文鏈接

webpack工具的使用
webpack文檔： webpack官方文檔

1、實現js打包javascript

1.一、建立項目testwebpackcss

// 在文件夾 testwebpack
// 初始化 package.json
npm init

// 安裝項目依賴 node_modules
npm install webpack --save-dev

1.二、建立文件夾app 和 build
      app：放源代碼
      build: 編譯以後的輸出路徑
    1.2.一、app文件夾內建立 app.js和hello.js
        代碼編寫遵循 nodejs的 commonjs 規範html

// app.js
// exports 導出建立的標籤 hello
module.exports = function(){
    var hello = document.createElement("div");
    hello.textContent = 'hello webpack';
    return hello;
}

// build.js
// require 引入
var hello = require("./hello.js");
// 將標籤放到root中
document.getElementById("root").appendChild(hello());

1.2.二、build文件夾內建立 index.htmljava

<body>
    <!-- 根容器 -->
    <div id="root"></div>
</body>

1.三、使用 webpack進行編譯，將app文件中源代碼編譯到build文件中node

// webpack 版本4 和 webpack 版本2 的寫法不同。主要注意
// webpack2 app/app.js  是要編譯的文件  build/bundle.js 是要輸出文件 
// webpack app/app.js build/bundle.js

// webpack4  
npx webpack app/app.js --output-filename build/bundle.js --output-path . --mode development

編譯時可能出現報錯：react

一、報錯
webpack不是內部命令

--須要全局安裝webpack & webpack-cli
npm install webpack -g
npm install webpack-cli -g

二、報錯
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for th
is value. Set 'mode' option to 'development' or 'production' to enable defaults
for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https
://webpack.js.org/concepts/mode/

ERROR in multi ./app/app.js build/bundle.js
Module not found: Error: Can't resolve 'build/bundle.js' in 'E:\test\1webpack'
 @ multi ./app/app.js build/bundle.js main[1]

--查看安裝webpack的版本，我安裝的版本4，執行了webpack2的編譯方法。
須要執行webpack4的編譯方法，否則會出錯。

1.四、編譯完成後會在build文件中生成bundled.js文件
引入到index.html 中就能夠用了。webpack

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

1.五、在根目錄中建立配置文件webpack.config.jsgit

// webpack.config.js

const path = require('path');
// 引入 Node.js 的 path模塊

module.exports = {    
    entry:"./app/app.js",
    // 入口

    // webpack 開始打包
    output:{
        // webpack 如何輸出結果的相關選項
        path: path.resolve(__dirname, "build"),
        // 全部輸出文件的目標路徑
        // 必須是絕對路徑（使用 Node.js 的 path模塊）
        filename: "bundle.js"
        // 輸出名字
    },
    
    devtool:"eval-source-map"
    // 配置報錯內容
}
// __dirname 是nodejs中的方法，用來獲取當前路徑。

// 執行命令 webpack 直接打包

// 若是不加 __dirname 會報錯
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

1.六、配置快捷方式在 package.json 文件es6

// 配置 scripts
    "scripts": {
        "start":"webpack"
    }
// 執行命令  npm start 打包

1.七、建立webpack服務器web

// 安裝全局webpack服務器
    npm install -g webpack-dev-server
    
// 安裝項目依賴
    npm insatll webpack-dev-server --save-dev
    
// webpack的服務器默認端口是8080，能夠經過port進行修改 

// 運行webpack服務器
    webpack-dev-server
// 訪問頁面 localhost:8080/build
//

1.八、配置webpack服務器 package.json

// 配置 scripts
    "scripts": {
        "start":"webpack",
        "dev": "webpack-dev-server"
    }
// 執行命令  npm run dev 運行

1.九、配置熱更新

// 配置 scripts
    "scripts": {
        "start":"webpack",
        "dev": "webpack-dev-server --content-base build --inline --hot"
        // --content-base build   默認路徑的文件
        // --inline --hot   更改內容，頁面自動更新
    }
// 執行命令  npm run dev 運行
// 訪問頁面 localhost:8080

2.0、腳本配置Loaders

// 安裝包，獲取json數據
// npm install json-loader

// webpack.config.js 配置
module:{
    rules:[
        {
            test: /\.json$/,
            // 正則表達式
            type: 'javascript/auto',
            loader: 'json-loader'
            // 要執行任務的名字
        }
}
// app.js 引入 data.json。 使用node的commonjs格式，還沒安裝es6的編譯包，不能用import。
var Data = require("./data.json")

// 安裝依賴包，將es6編譯成es5  推薦安裝 @babel/preset-env
npm install babel-loader @babel/core @babel/preset-env --save-dev 

// webpack.config.js 配置
module:{
  rules:[
          {
            test: /\.js$/,
            loader: 'babel-loader',
            query:{
                presets: ['@babel/preset-env']
            }
          }
       ]
}
// 由於版本更新的緣由，安裝和配置 babel-core、babel-preset-* 報錯，要換成@babel/core、@babel/preset-*

// 其他css、image、less的安裝配置都相似，一、安裝依賴包。二、webpack.config.js中配置

2.一、插件配置plugins

// 實現webpack在啓動服務器以後，自動開啓瀏覽器功能
npm install --save-dev open-browser-webpack-plugin

// 在 webpcak.config.js 配置
// 引用
    var webpack = require("webpack");    
    var openBrowser = require("open-browser-webpack-plugin");
        
    module.exports = {
        // 插件配置
        plugins: [
            new openBrowser({
                url: "http://localhost:8080"
            })
        ]
    }

2.二、.babelrc配置文件

// 在根目錄下建立文件  .babelrc
// 將webpack.config.js文件的 qurey代碼
// query:{
//    presets: ['@babel/preset-env']
// }
// 移到 .babelrc中
{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}
// 注意：在引用的時候，直接引用babel-loader便可

2.三、.gitignore 忽略文件

// 根目錄下建立 .gitignore 文件
//配置  

    node_modules/
    build/
    npm-debug.log

相關標籤/搜索

每日一句

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