zoukankan      html  css  js  c++  java
  • webpack配置

    1.初始化webpack

     npm install webpack -g   (全局安装)

    npm init   (初始化packge.json)

    npm install webpack --save-dev  (安装到局部)(如果报错就用cnpm)

    webpack entry.js(入口文件) bundle.js

    2.

    然后创建一个配置文件 webpack.config.js

    var webpack = require('webpack')
    
    module.exports = {
      entry: './entry.js',(入口文件)
      output: {
        path: __dirname,(导出路径)
        filename: 'bundle.js'(导出文件)
      },
      module: {
        loaders: [
        {test: /.js$/,exclude: /node_modules/,loader: 'react-hot!babel'}
        {test: /.css$/, loader: 'style!css'}(配置loaders) 
    ] } }

    同时简化 entry.js 中的 style.css 加载方式:

    require('./style.css')
    

    最后运行 webpack,可以看到 webpack 通过配置文件执行的结果和上一章节通过命令行 webpack entry.js bundle.js --module-bind 'css=style!css' 执行的结果是一样的。

    3.webpack搭建react开发环境

    npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev

    npm install react react-dom --save

  • 相关阅读:
    Delete Them
    Toda 2
    JQuery案例:购物车加减
    JQuery案例:折叠菜单
    JQuery案例:暖心小广告
    JQuery案例:左右选
    JQuery动画
    JQuery切换事件
    JQuery文档操作
    JQuery选择器
  • 原文地址:https://www.cnblogs.com/SunShineKG/p/6171857.html
Copyright © 2011-2022 走看看