從0開始簡單配置webpack

時間 2020-09-19

標籤開始簡單配置 webpack 简体版

原文原文鏈接

配置webpack的環境

全局安裝
npm install webpack webpack-cli -g
本地安裝 到具體項目文件
mkdir my-project
cd my-project
npm init -y  //建立package.json文件
npm install webpack webpack-cli -D  //安裝webpack和webpack腳手架到項目

配置文件

webpack默認配置文件：webpack.config.js
修改配置文件名字： webpack --config //也能夠指定的配置文件名字如(webpack.config.dev.js)~~~~css

//配置webpack.config.js 文件
const path = require('path') 
module.exports = {

  // 打包入口  支持字符串，對象, 數組
  //默認值： ./src/index.js  須要注意的是webpack4.0之後將如何   文件設置爲index.js
  entry: './src/main.jsx',
  // 打包的輸出
  // 默認值：./dist/main.js
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')  //打包好的靜態目錄文件
  },

  // webpack打包模式
  // 取值：生產模式production  開發模式development  none
  // 默認值 production
  mode: 'none',
  // 配置loaders的
 
 module: {
    // 一個loader的配置項，就是一個對象，放在rules的數組中
    rules: [
      // 處理js
      {
        //說明須要loader處理的文件匹配規則
        test: /\.(js|jsx)$/,
        //說明使用的loader名字 同時也須要安裝babel-loader依賴處理es6以上語法 npm install babel-loader @babel/core @babel/preset-env -D
    因後面會用到jsx文件和react,再安裝處理jsx語法的依賴包:npm install @babel/preset-react -D npm install react react-dom -S
        loader: 'babel-loader'
      },
      //處理css文件  安裝處理css文件依賴 npm install style-loader css-loader -D
      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
        //注意依賴順序是從右邊到左
      },
      // 處理sass  安裝處理sass語法的依賴包 npm install style-loader css-loader sass-loader node-sass -D
      {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      },
      // 處理文件 安裝依賴處理圖片，字體文件 npm install url-loader file-loader -D
      {
        test: /\.(png|jpeg|gif|jpg|svg|ttf)$/,
        // loader: 'file-loader'
        loader: 'url-loader',
        options: {
          limit: 5
        }
      }

    ]
    },
    }
基本的配置依賴以完成,而後到項目文件夾裏面繼續 my-project,我這邊是配置react文件和webpack一塊兒使用 在項目內新建一個src文件夾 裏面有 App.jsx main.jsx  style.scss

###  App.jsx
import React, {Component} from 'react'
import './style.scss'

export default class App extends Component{
  render(){
    return (
      <div>
        <h1>喲喲我心</h1>
      </div>
    )
  }
}
### main.jsx
import React from 'react'
import ReactDOM from 'react-dom'

import App from './App.jsx'

ReactDOM.render(
  <App/>,
  document.querySelector('#root') //掛載到index.html文件下
)

style.scss

body{
  background-color: yellow;
  background-image: url(./logo.png);
  h1{
    color: red;
  }
}

index.html文件打包後輸出渲染~~~~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="root"></div>

  <script src="./dist/bundle.js"></script>
  
</body>
</html>

注意因爲項目使用了react和Babel,第一步就是配置.babelrc這個文件,放在項目根目錄下,該文件用來設置轉碼規則和插件,具體設置以下

.babelrc文件

presets字段設定轉碼規則，官方提供如下的規則集,文章的上面已經分別安裝了相應的依賴包
babel-preset-envhtml

{
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
   
  ],
   //後期還能夠預設一些插件
  
"plugins": []

}

啓動項目執行webpack指令,項目會在根目錄下面打包生成dist文件夾,而且會生成經過webpack打包編譯的文件 bundle.js
而後瀏覽器打開index.html 就OK了node

相關標籤/搜索

每日一句

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