搭建一个属于自己的webpack config(-)

前期准备

环境说明

mac 10.12.6
node v8.8.1
npm 5.4.2

全局安装下webpack、webpack-dev-server

npm i webpack webpack-dev-server -g

对应版本

webpack@2.7.0
webpack-dev-server@2.9.5

初始化

	mkdir reactStudio

	cd reactStudio

	npm init -y

新建webpack.config.js 文件

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 以及编译后的文件名称和位置

设置npm scripts

{

  "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 编译项目。通过这样的配置可以约定俗成一套命令，为以后自动化代码检测、测试、部署提供支持。

好了，我们新建一个src文件夹，再创建一个index.js,内容如下

alert('Hello Webpack')

以及新建public文件夹，创建index.html,内容如下

<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`.

有问题可以评论交流