note/2-4 webpack-loader基础应用

目录结构

image

安装的依赖

image

wepack.config.js

const path = require('path')

const webpack = require('webpack')

// 在浏览器中打开页面需要引入

const HTMLPlugin = require('html-webpack-plugin')

module.exports = {

  entry: {

    app: path.join(__dirname, '../client/app.js'),

  },

  output: {

    // []表示一个变量 hash如果有变动就刷新浏览器缓存 否则不刷新

    filename: '[name].[hash].js',

    // path.join根路径下的绝对路径  拼接处生成文件存放路径

    path: path.join(__dirname, '../dist'),

    // 静态资源引用时的路径， 设置之后表示请求的是否是静态资源

    publicPath: ''

  },

  module: {

    rules: [

      {

        test: /.jsx$/,

        // babel 编辑es6， es7， es8， jsx 编译成es5

        // babel-loader只是一个插件并不包含babel核心代码，还需要安装babel-core

        // 默认编译es6，如何配置支持jsx, 新建文件.babelrc

        loader: 'babel-loader'

      },

      // node_modules中的js代码全部都是es5，所以不需要编译了

      {

        test: /.js$/,

        loader: 'babel-loader',

        exclude: [

          path.join(__dirname, '../node_modules')

        ]

      }

    ]

  },

  plugins: [

    // 生成一个html页面，webpack编译的时候把生成的所有entry都注入进去，路径是根据output的路径

    new HTMLPlugin()

  ]

}

app.js

// 只要有jsx代码就需要引入react。jsx代码最终编译出来是React.creaeElemnt()

import React from 'react'

//用来react组件渲染到dom中，还有react-native 是渲染到手机app中的

import ReactDOM from 'react-dom'

import App from './App.jsx'

// 直接挂在到body上，一般不建议这样

ReactDOM.render(, document.body)

App.jsx

import React from 'react'

export default class App extends React.Component {

  render() {

    return (

This is App

    )

  }

}

.babelrc

{

  "presets": [

    // loose松散的

    ["es2015", {"loose": true}],

    // 添加了react则支持编译jsx语法

    "react"

  ]

}

// 配置之后还需要安装一些包

// babel-preset-es2015

// babel-preset-es2015-loose

// babel-preset-react

npm run build 在浏览器中打开dist目录下的index.html页面即可查看页面内容