zoukankan      html  css  js  c++  java
  • Webpack简易入门教程

    <!-- 其实网上关于webpack的教程已经很多了,但是本人在学习过程中发现很多教程有错误,或者写的很不全面,结果做的过程出现各种各样的问题,对新手不但不友好还会让人浪费很多不必要的时间。所以决定自己做个简易教程,这个教程也没有写太深入,面向的是纯新手,但按这个教程大家能快速搭建自己的webpack,方便大家为后面的学习做准备 -->

     github地址   https://github.com/Skura23/simple-webpack-test/tree/master

    项目结构

    --your project
      |--prod
        |--components
          |--first.js
        |--index.js
      |--build
        |--index.html
        |--bundle.js

     

    用npm安装依赖

    npm init ,填写信息默认即可

    npm install react --save-dev   安装react

    npm install react-dom --save-dev (或者 npm i react-dom)  安装react-dom

    npm install webpack --save-dev  安装webpack

    npm install babel-loader --save-dev  安装babelReact 

    npm install jsx-loader --save-dev  安装jsx-loader将JSX语法转为js语句

    创建webpack.config.js

    var path=require('path');
    
    module.exports={
        entry:path.resolve(__dirname,'./prod/index.js'),
        output:{
            path:path.resolve(__dirname,'./build'),
            filename:'bundle.js',
        },
        module: {
        loaders: [{ 
         test: /.js$/,
         loader: 'babel!jsx', 
         exclude: /node_modules/ ,
         presets: ['es2015', 'react']
         }]
      }
    }    

     

    entry:指入口文件的配置项

    output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称

    module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会调用后面的loader对文件进行处理,这正是webpack强大的原因。

     

    接着配置index.js

    var React = require('react');
    var ReactDOM = require('react-dom');
    var AppComponent = require('./components/first.js');
    ReactDOM.render(<AppComponent />, document.getElementById('content'));

    再配置first.js(这个是自定义组件)

    var React = require('react');
    var ReactDOM = require('react-dom'); var FirstComp = React.createClass({ render: function () { return ( <div className="firstComp"> Hello World! </div> ); } }); module.exports = FirstComp;

    修改index.html以引入bundle.js,

    bundle.js的生成位置在前面已经配置过了,所以我们只要在index.html里引入就可以了

    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title>React Test</title>
    </head>
    <body>
      <div id="content"></div>
      <script src="bundle.js"></script>
    </body>
    </html>

     

    配置package.json

    打开package.json,并找到scripts代码块

    修改scripts为

    "scripts": { "build": "webpack" }

    并且执行:

    npm run build

     

    现在打开index.html,可以看见Hello world,说明我们使用webpack打包成功。

    其实教程至此就完了,但后面你会发现每次更新文件后都要使用npm run build重新打包,费时费力,

    接下来我们使用webpack-dev-server将项目运行在虚拟服务器上,我们可以在package.json文件内定义scripts,同时修改webpack的配置文件来达到文件修改能被监听,并自动刷新浏览器的效果!

     

    配置webpack-dev-server

    修改package.json为

    "scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server --hot --inline --devtool eval --progress --colors --content-base build"
      },

    webpack-dev-server: 在 localhost:8080 建立一个 Web 服务器

    --devtool eval:为你的代码创建源地址。

    --progress: 显示合并代码进度

    --colors: 在命令行中显示颜色

    --content-base build:指向设置的输出目录

     

    并且在index.html里加入:

    <script src="http://localhost:8080/webpack-dev-server.js"></script>

     

    修改webpack.config.js : 

    var path = require('path');
    
    module.exports = {
      entry: ['webpack/hot/dev-server', path.resolve(__dirname, './prod/index.js')],
      output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js',
      }
    };

     

    npm run dev

    ,打开http://localhost:8080,修改文件后保存,浏览器可自动刷新内容

     

    github地址  https://github.com/Skura23/simple-webpack-test/tree/master

  • 相关阅读:
    Python Django 编写一个简易的后台管理工具2-创建项目
    leetcode-解题记录 771. 宝石与石头
    leetcode-解题记录 1108. IP 地址无效化
    Python Django 编写一个简易的后台管理工具1-安装环境
    备忘录
    Pollard_rho 因数分解
    ProgrammingContestChallengeBook
    HDU ACM-Steps
    ARCH-LINUX 折(安)腾(装)记
    各种Python小玩意收集
  • 原文地址:https://www.cnblogs.com/skura23/p/5859456.html
Copyright © 2011-2022 走看看