webpack基本應用

時間 2019-12-07

標籤 webpack 基本應用简体版

原文原文鏈接

介紹

官網：https://www.webpackjs.com/
入門文檔：http://www.runoob.com/w3cnote...
本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle（模塊）。javascript

簡言之就是把各個JS CSS IMG 都進行打包合併，最終項目只需引用一個build.min.js文件便可css

安裝

打開控制器，進入到項目根目錄：html

npm install webpack -g （-g是全局安裝）java

npm init （初始化項目）webpack

npm install webpack -g （安裝webpack）
npm install webpack-command -g （安裝webpack的依賴項）web

最簡單實例

建立mydemo目錄,並在該目錄下建立以下結構：
mydemo
--dist
--src
----js
------index.js
----css
------app.css
----img
------1.jpg
--webpack.config.js
--index.htmlnpm

index內容:

<html>

<body>
    <script type="text/javascript" src="./dist/build.min.js"></script>
</body>

</html>

webpack.config.js內容：

module.exports = {
    mode: 'production',
    entry: [
        './src/js/index.js'
    ],
    output: {
        filename: 'build.min.js'
    },
}

src/js/index.js：

document.write("It works.");

運行：

webpack瀏覽器

瀏覽器訪問index.html

CSS加載打包

這裏須要用到webpack的加載器
npm install -g css-loader style-loader app

src/css/app.css:ui

src/js/index.js:

webpack.config.js文件配置：

運行：webpack

CSS中引入IMG加載打包

用到兩個加載器
npm install url-loader -g
npm install file-loader -g

CSS中引入圖片要注意從根目錄寫了，而不能用../

src/css/app.css:

webpack.config.js文件配置：

運行webpack:

這裏的圖片資源路徑能夠搭配CDN使用

HTML中引入IMG加載打包

npm install html-withimg-loader -g

webpack.config.js文件配置：

index.html:

運行webpack:

實施刷新（監聽）

npx webpack --mode development --watch

一旦修改源文件，會看到控制檯顯示

此時再刷新瀏覽器就會看到新的修改

相關標籤/搜索

每日一句

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