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

<body>
    <script src="bundle.js"></script>
</body>

然后在命令行运行 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(<HelloWorld/>,document.getElementById("app"));

HelloWorld.js

import React from 'react';
class HelloWorld extends React.Component{
  render(){
    return (
      <div>Hello World!!!!</div>
    );
  }
}

//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

<body>
    <div id="app"></div>
    <input type="text" />
     <script src="/assets/bundle.js"></script>
</body>

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;
}

图片描述

欢迎来扫，加下小组讨论

webpack的配置

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

姜筱妍

引用和评论

Vue做的ToDo小例子

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号