webpack配置筆記

時間  2019-12-04
標籤 webpack 配置 筆記 简体版
原文   原文鏈接

//本文爲前端小白自學筆記，內容不可信。參考大佬的文章：入門 Webpack，看這篇就夠了css

1、基本配置

1. 準備工做

npm install -g webpack@3.5.3
// my-demo
npm init
npm install --save-dev webpack@3.5.3
複製代碼

在根目錄下建立兩個文件夾html

  • public
  • app

建立三個文件前端

  • index.html --放在public文件夾中
  • Greeter.js-- 放在app文件夾中
  • main.js-- 放在app文件夾中

在index.html文件中寫入最基礎的html代碼node

<!-- 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>
複製代碼

在Greeter.js中定義一個返回包含問候信息的html元素的函數webpack

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};
複製代碼

main.js文件中咱們寫入下述代碼web

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
複製代碼

2. 正式使用

在根目錄下新建一個名爲webpack.config.js的文件，咱們在其中寫入以下所示的簡單配置代碼npm

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

在命令行中輸入webpack便可打包json

3.更快捷的執行打包任務

在package.json中對scripts對象進行相關設置便可，設置方法以下。segmentfault

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是這裏，JSON文件不支持註釋，引用時請清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}
複製代碼

在命令行輸入 npm start 便可打包bash

2、生成Source Maps

1. Source Maps

Source Map則能夠用於還原真實的出錯位置，幫助開發者更快的Debug。

2. 配置

//webpack.config.js
module.exports = {
  devtool: 'eval-source-map', //新加入
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}
複製代碼

3、使用webpack構建本地服務器

1. webpack-dev-server

構建本地服務器，實現自動刷新等功能

2. 配置

npm install --save-dev webpack-dev-server@2.7.1
複製代碼

把這些命令加到webpack的配置文件中，如今的配置文件webpack.config.js以下所示

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

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

在package.json中的scripts對象中添加以下命令，用以開啓本地服務器：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
},
複製代碼

終端輸入npm run server便可

4、使用babel-loader

1. babel-loader

用於將使用ES6規範的js代碼，轉爲ES5。

2. 配置

一次性安裝這些依賴包

npm install --save-dev babel-core babel-loader babel-preset-env
複製代碼

對文件進行配置

\\webpack.config.js
module.exports = {
  entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件
  output: {
      path: __dirname + "/public",//打包後的文件存放的地方
      filename: "bundle.js"//打包後輸出文件的文件名
  },
  devtool: 'eval-source-map',
  devServer: {
      contentBase: "./public",//本地服務器所加載的頁面所在的目錄
      historyApiFallback: true,//不跳轉
      inline: true//實時刷新
  },
  module: {
      rules: [
          {
              test: /(\.jsx|\.js)$/,
              use: {
                  loader: "babel-loader",
                  options: {
                      presets: [
                          "env"
                      ]
                  }
              },
              exclude: /node_modules/
          }
      ]
  }
};
複製代碼

4、使用css-loader 和 style-loader

1. css-loader 和 style-loader

css-loader使你可以使用相似@import 和 url(...)的方法實現 require()的功能,style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中。

2. css-loader 和 style-loader

安裝

npm install --save-dev style-loader css-loader
複製代碼

配置

module.exports = {
  entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件
  output: {
      path: __dirname + "/public",//打包後的文件存放的地方
      filename: "bundle.js"//打包後輸出文件的文件名
  },
  devtool: 'eval-source-map',
  devServer: {
      contentBase: "./public",//本地服務器所加載的頁面所在的目錄
      historyApiFallback: true,//不跳轉
      inline: true//實時刷新
  },
  module: {
      rules: [
          {
              test: /(\.jsx|\.js)$/,
              use: {
                  loader: "babel-loader",
                  options: {
                      presets: [
                          "env"
                      ]
                  }
              },
              exclude: /node_modules/
          },
          {
            test: /\.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }
            ]
          }
      ]
  }
};
複製代碼

使用

// app/main.css
html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}
複製代碼

咱們這裏例子中用到的webpack只有單一的入口，其它的模塊須要經過 import, require, url等與入口文件創建其關聯，爲了讓webpack能找到」main.css「文件，咱們把它導入」main.js 「中，以下

//main.js
import Greeter from './Greeter';
import './main.css';//使用require導入css文件
複製代碼

5、使用CSS module

1. CSS module

全部的類名，動畫名默認都只做用於當前模塊

2. 安裝

配置

module.exports = {

    ...

    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定啓用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
                        }
                    }
                ]
            }
        ]
    }
};
複製代碼

5、使用CSS預處理器

1. 使用CSS預處理器

Sass 和 Less 之類的預處理器是對原生CSS的拓展，它們容許你使用相似於variables, nesting, mixins,inheritance等不存在於CSS中的特性來寫CSS。 postcss-loader 和 autoprefixer（自動添加前綴的插件）

2. 安裝

npm install --save-dev postcss-loader autoprefixer
複製代碼
//webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}
複製代碼
// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程