搭建一個屬於本身的webpack config(-)

時間 2019-11-19

標籤搭建一個屬於本身 webpack config 简体版

原文原文鏈接

搭建一個屬於本身的webpack config(-)

前期準備

環境說明html

mac 10.12.6
node v8.8.1
npm 5.4.2

全局安裝下webpack、webpack-dev-servernode

npm i webpack webpack-dev-server -greact

對應版本webpack

webpack@2.7.0
webpack-dev-server@2.9.5

初始化

mkdir reactStudio
    cd reactStudio
    npm init -y

新建webpack.config.js 文件es6

const path = require('path')
module.exports={
    entry:{
        main:'./src/index.js' //編譯的入口代碼。對應的key就是編譯出來的name
    },
    output:{
        filename: 'js/[name].js',//編譯出來的文件名稱
        publicPath: '/',//提供對外提供服務的地址
        path:path.resolve(__dirname,'dist')//編譯後存放文件的絕對地址
    }
}

設置webpack 的入口文件爲src/index.js 以及編譯後的文件名稱和位置web

設置npm scriptsshell

{
  "name": "reactStudio",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --content-base public",//這裏指定serve 對應的文件價
    "build": "webpack -p",生產環境的編譯
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

這樣運行 npm start 等於啓動項目。npm run build 編譯項目。經過這樣的配置能夠約定俗成一套命令，爲之後自動化代碼檢測、測試、部署提供支持。npm

好了，咱們新建一個src文件夾，再建立一個index.js,內容以下babel

alert('Hello Webpack')

以及新建public文件夾，建立index.html,內容以下app

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>測試</title>
</head>
<body>
     <div id="main">Hello webpack</div>
    <script src="js/main.js"></script>
</body>
</html>

這裏的js引用路徑和webpack 配置文件中output.publicPath 相關，詳細說明查看webpack 配置說

這時候在當前文件夾的terminal 下執行npm start就應該能夠看到alert了。

下一步咱們去支持es6語法

咱們先修改src/index.js 爲

let obj = {a:4,b:5}
let newObj = {...obj,c:7,b:8};
console.log(newObj)

若是你還在運行npm start,你應該能夠看到

webpack: Compiling...
Hash: webpack: Failed to compile.
68167a5bd4e0b1a8e487
Version: webpack 2.7.0
Time: 8ms
     Asset    Size  Chunks                    Chunk Names
js/main.js  323 kB       0  [emitted]  [big]  main
chunk    {0} js/main.js (main) 318 kB [entry] [rendered]
    [2] ./src/index.js 267 bytes {0} [built] [failed] [1 error]
   [15] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]
     + 23 hidden modules

ERROR in ./src/index.js
Module parse failed: /Users/rancho/Documents/studio/react-pass-value/src/index.js Unexpected token (2:14)
You may need an appropriate loader to handle this file type.
| let obj = {a:4,b:5}
| let newObj = {...obj,c:7,b:8};
| console.log(newObj)
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/index.js

錯誤的意思是在解析src/index.js 文件時，出現未知的符號，咱們須要加載一個合適的loader 去處理這種文件。咱們知道文件類型沒有變化，只是語法錯誤，這時候咱們就要引用babel的編譯了

修改webpack.config.js 增長一個module 節點

module: {
        rules: [
            {
                test: /\.(js|jsx)$/,//支持js and jsx 後綴
                include: path.resolve(__dirname, 'src'),//只編譯src裏面的文件裏面的js
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            babelrc: false,
                            presets: [
                                'babel-preset-env',
                                'babel-preset-stage-0',
                            ],
                            plugins: ['transform-runtime'],//這樣就不用引用babel-polyfill
                            cacheDirectory: true,
                        },
                    },
                ]
            }

        ]
    }

rule的include 和exclude 非必須，可是設置會優化webpack 編譯的速度

babel-plugins 有增長一個 transform-runtime 這樣就不用引用babel-polyfill。babel-polyfill 擴展不少原始的方法，具體查看 babel-polyfill

安裝相關依賴
npm i babel-core babel-plugin-transform-runtime babel-preset-stage-0 babel-preset-env

重啓命令後能夠在頁面的console 中看到

{a:4,b:8,c:7}

這裏咱們設置preset 爲 babel-preset-env ,是由於這個preset 能夠根據你支持的環境去提供你須要的plugin，就不須要特別去配置 babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017 這些了。詳細配置查看.

支持react 的語法

新建一個src/Hello.jsx 文件

import React,{Component} from 'react'

export default class HelloReact extends Component{
    render(){
        return (
            <div>就是愛你！</div>
        )
    }
}

在src/index.js 引用並渲染出來

import React from 'react'
import ReactDOM from 'react-dom';
import Hello from './Hello.jsx'
let obj = {a:4,b:5}
let newObj = {...obj,c:7,b:8};
console.log(newObj)

ReactDOM.render(<Hello />, document.getElementById('main'));

在webpack.config.js 裏面增長 babel-preset-react

presets: [
    'babel-preset-env',
    'babel-preset-react',
    'babel-preset-stage-0',
],

在此過程可能遇到的問題。

import Hello from './Hello.jsx' 必需要加後綴jsx。不然會提示文件沒有找到。解決方案在webpack.config.js 加入

resolve: {
        extensions: [
            '.js', '.jsx'//設置webpack 解析後綴名稱，這樣webpack就會自動尋找有該後綴的文件。
        ]
    },

有時候引用地址可能寫錯大小寫，可是提示內容不夠直觀。好比·import React,{Component} from 'React'· 這時候也會報錯。能夠添加

const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 plugins: [
        new CaseSensitivePathsPlugin()
    ],

這樣錯誤信息就更加清晰了

[CaseSensitivePathsPlugin] `/node_modules/React/index.js` does not match the corresponding path on disk `react`.

有問題能夠評論交流

相關標籤/搜索

每日一句

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