webpack介紹

時間 2019-11-17

標籤 webpack 介紹简体版

原文原文鏈接

1.爲何咱們須要打包？css

模塊化
優化加載速度
使用新的開發模式

2.webpack特色html

同時支持CommonJs和AMD
一切均可以打包
分模塊打包

3.正式使用webpack前的準備webpack

全局安裝webpack：npm install webpack -g
建立工程目錄：mkdir webpack-test
進入工程目錄：cd webpack-test
初始化工程信息： npm init 或 npm init -y
安裝依賴工具：npm install
將webpack打包工具依賴進來：npm install --save-dev webpack
在工程根目錄下建立 index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack-test</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

4.打包js文件web

在工程根目錄下建立src文件夾，在src文件夾中建立 index.js

document.write('hello webpack!');

在工程根目錄下建立webpack.config.js

const path = require('path');

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

在工程根目錄下建立dist文件夾，將index.html文件拷貝到dist文件夾下

在工程目錄下執行webpack --config webpack.config.js
運行dist文件夾下面的index.html文件能夠看到運行結果
PS：設置npm腳本調整package.json ，運行命令npm run build

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

5.打包css文件正則表達式

將css-loader和style-loader依賴進來：npm install --save-dev css-loader style-loader
在src文件加下建立style.css , 而且編寫相關樣式
在webpack.config.js文件中作以下配置：

const path = require('path');

module.exports = {
    //入口
    entry: './src/index.js',
    //輸出
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    //模塊處理
    module: {
        loaders: [{
            //使用正則表達式檢測文件後綴名
            test: /\.css$/,
            //使用兩個loader處理css文件，先執行css-loader(對css文件讀取，處理url),再執行style-loader(讀取css文件應用到頁面上，即顯示樣式)
            loaders: ['style-loader', 'css-loader']
        }]
    }
};

在src文件夾下的index.js添加代碼：

require('./style.css');

控制檯運行命令：npm run build
刷新瀏覽器頁面

6.加載圖片：npm install --save-dev file-loadernpm

7.加載字體json

8.加載數據：npm install --save-dev csv-loader xml-loader瀏覽器

相關標籤/搜索

每日一句

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