webpack的配置

gself 发布于2019-08-20 18:19 / 1522人阅读

摘要：的配置最近一直在用，接下来我们就用启动一下首先我们要安装，然后在使用接下来的配置先在项目下生成一个的文件自动生成的的文件接下来在装最好把全局的也都装上然后再把本地的装上如果安装的慢可以用安装，前提是要先安装接下来我们就用安装中的

webpack的配置

最近一直在用react，接下来我们就用webpack启动一下react

首先我们要安装node.js，然后在使用接下来的配置

先在项目下生成一个package.json的文件

</>复制代码 
npm init -y

自动生成的package.json的文件

</>复制代码 
{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

接下来在装webpack

</>复制代码 
npm install webpack -gd //最好把全局的也都装上
npm install webpack --save-dev //然后再把本地的装上

如果npm安装的慢可以用cnpm安装，前提是要先安装cnpm

</>复制代码 
npm install cnpm -gd

接下来我们就用cnpm安装bable中的插件

</>复制代码 
cnpm install --save-dev babel-loader babel-core

装转移的插件

</>复制代码 
npm install babel-preset-env  babel-preset-react --save-dev

接下来我们做一下小实验

编写代码

app.js

</>复制代码 
import bar from "./bar";
bar();

bar.js

</>复制代码 
export default function bar() {
  console.log(1);
}

使用 webpack 打包

webpack.config.js

</>复制代码 
module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  }
}

page.html

</>复制代码

</>复制代码 
然后在命令行运行 webpack 就会创建 bundle.js.
也会在控制台打印出来1

接下来我们继续安装，然后在做一个小例子

安装 react相关库

</>复制代码 
npm install react react-dom --save

webpack-dev-server

</>复制代码 
npm install  webpack-dev-server -gd
npm install  webpack-dev-server --save-dev
运行  webpack-dev-server --content-base build/

自动刷新(automatic refresh)

</>复制代码 
webpack-dev-server --content-base build/  --inline

热更新 (hot replacement)

</>复制代码 
cnpm install react-hot-loader  --save-dev
webpack-dev-server --content-base build/  --hot

处理样式

</>复制代码 
cnpm install style-loader css-loader  --save-dev

都安装完了，接下来我们就看看代码吧

app.js

</>复制代码 
import React from "react";
import ReactDOM from "react-dom";
import HelloWorld from "./HelloWorld";
import "./main.css";
ReactDOM.render(,document.getElementById("app"));

HelloWorld.js

</>复制代码 
import React from "react";
class HelloWorld extends React.Component{
  render(){
    return (
      Hello World!!!!
    );
  }
}
//export {HelloWorld as default};
export default HelloWorld;

webpack.config.js

</>复制代码 
var path = require("path");
module.exports = {
    devtool:"source-map",
  entry: "./app.js",
  output: {
      path:path.resolve(__dirname,"build"),
      publicPath:"/assets/",
    filename: "bundle.js"
  },
  module: {
  rules: [
    { test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },
    { test: /.css$/, exclude: /node_modules/, loader: "style-loader!css-loader!babel-loader" }
  ]
 }
}

index.html

</>复制代码

package.json

</>复制代码 
{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --content-base build/  --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.0",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

main.css

</>复制代码 
body{
    background: red;
}

欢迎来扫，加下小组讨论

GPU云服务器云服务器 webpack cdn配置 webpack配置cdn webpack常用配置项 webpack的cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84358.html

TCM的webpack配置与常用插件

摘要：中的配置热加载插件安装中的配置优化插件为组件分配，通过这个插件可以分析和优先考虑使用最多的模块，并为它们分配最小的压缩代码分离和文件 0 前言本文是针对TCM项目所做的WebPack配置文件总结，主要概述了一些常用配置选项和插件使用，对以后的项目有指导意义。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...

罗志环 2019-08-20 14:36 评论0 收藏0
TCM的webpack配置与常用插件

摘要：中的配置热加载插件安装中的配置优化插件为组件分配，通过这个插件可以分析和优先考虑使用最多的模块，并为它们分配最小的压缩代码分离和文件 0 前言本文是针对TCM项目所做的WebPack配置文件总结，主要概述了一些常用配置选项和插件使用，对以后的项目有指导意义。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...

张宪坤 2019-08-01 16:23 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 有哪些功能(代码转换文件优化代码分割模块合并 ...

SunZhaopeng 2019-05-23 17:29 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack 有哪些功能(代码转换文件优化代码分割模块合并自...

wangbinke 2019-08-26 13:52 评论0 收藏0
基于webpack构建的angular 1.x 工程（一）webpack篇

摘要：基于构建的工程一篇现在都已经出到的版本了，可我对它的认识还是停留在的版本。然后是写启动的命令行，也就是上面的这样写的意思是，当你输入你的命令名字就会让执行你对应命令的语句。我们首先把基本的配置引进来。基于webpack构建的angular 1.x 工程（一）webpack篇现在AngularJS都已经出到4.x的版本了，可我对它的认识还是停留在1.x的版本。之前用它是为...

Anleb 2019-08-21 17:23 评论0 收藏0

发表评论

登陆后可评论

0条评论

gself

男|高级讲师

我要关注我要私信

TA的文章

tensorflow2.9.1

阅读 3611·2023-04-26 00:39
Kali Linux安全测试（177讲全）安全牛苑房宏

阅读 4835·2021-09-22 10:02
CloudCone：美国洛杉矶CN2 GIA服务器/E3-1220/16G/1 TB HDD/15

阅读 2679·2021-08-09 13:46
jQuery 实现一个文章阅读进度条功能

阅读 1197·2019-08-29 18:40
淘宝css初始化代码

阅读 1514·2019-08-29 18:33
深入理解盒模型与BFC

阅读 845·2019-08-29 17:14
Hybird-App离线缓存系统

阅读 1584·2019-08-29 12:40
文字垂直居中

阅读 3211·2019-08-28 18:07

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

webpack的配置

最近一直在用react，接下来我们就用webpack启动一下react

首先我们要安装node.js，然后在使用接下来的配置

</>复制代码

自动生成的package.json的文件

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

接下来我们做一下小实验

编写代码

app.js

</>复制代码

bar.js

</>复制代码

使用 webpack 打包

webpack.config.js

</>复制代码

page.html

</>复制代码

</>复制代码

接下来我们继续安装，然后在做一个小例子

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

都安装完了，接下来我们就看看代码吧

app.js

</>复制代码

HelloWorld.js

</>复制代码

webpack.config.js

</>复制代码

index.html

</>复制代码

package.json

</>复制代码

main.css

</>复制代码

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动