Webpack3简单入门2

Labradors 发布于2019-08-21 18:27 / 653人阅读

摘要：本工程代码创建工程添加工程文件通过配置文件来使用添加文件。如下已多次提及的唯一入口文件打包后的文件存放的地方打包后输出文件的文件名是中的一个全局变量，它指向当前执行脚本所在的目录接下来只要执行即可。

本工程代码

创建工程

$ yarn init
$ yarn add webpack

# **添加工程文件：**
# public/index.html


  
    
    Webpack Sample Project
  
  
    
    
    
  


# src/app.js:
document.querySelector("#root").appendChild(hello());

# src/hello.js
module.exports = function() {
  var hello = document.createElement("div");
  hello.textContent = "Hello World!";
  return hello;
}

# webpack
$ yarn run webpack src/app.js public/bundle.js
$ open public/index.html

通过配置文件来使用 webpack

添加 webpack.config.js 文件。如下：

module.exports = {
  entry:  [
    "./src/app.js", // 已多次提及的唯一入口文件
  ],
  output: {
    path: __dirname + "/public", // 打包后的文件存放的地方
    filename: "bundle.js" // 打包后输出文件的文件名
  }
}

__dirname 是 node.js 中的一个全局变量，它指向当前执行脚本所在的目录

接下来只要执行 $ yarn run webpack 即可。

配置执行脚本命令

在 package.json 中添加：

"scripts": {
  "start": "webpack"
},

接下来可以执行 $ yarn start 即可编译打包。

使用 webpack 构建本地服务器

如果想让浏览器监听文件的修改，自动刷新。webpack 提供了 webpack-dev-server 来实现这个功能。

yarn add webpack-dev-server

在 webpack.config.js 中配置：

devServer: {
  contentBase: "./public",  // 本地服务器所加载的页面所在的目录
  historyApiFallback: true, // 不跳转
  inline: true // 实时刷新
}

在 package.json 中配置脚本命令

"scripts": {
  "server": "webpack-dev-server --open"
}

接下来可以执行 $ yarn server 即可打开并监听了。

使用 Loaders

想要 webpack 能分析编译 css 等其他文件，需要使用各种 loader 支持。（对 json，webpack 已经内置了处理器。）

添加对 css 支持：

    # 安装依赖
    $ yarn add css-loader style-loader

安装完 loader 需要 webpack.config.js 中添加“module”配置。

module: {
  rules: [
    {
      test: /.css$/,
      use: [
        { loader: "style-loader" }, // style-loader 写前面，否则报错 -_-!!
        { loader: "css-loader" }
      ]
    }
  ]
  // test: 匹配文件拓展名（必须）
  // use: 使用的 loader 的名称（必须）
},

重新编译，即可支持了 css 样式。

添加对 React，JSX 支持：

# 安装 babel 依赖
$ yarn add babel-core babel-loader babel-preset-env babel-preset-react

# webpack.config.js 添加 module
{
  test: /(.jsx|.js)$/,
  use: {
    loader: "babel-loader",
    options: {
      presets: [ "env", "react"]
    }
  },
  exclude: /node_modules/
}

# 安装 react, react-dom
$ yarn add react react-dom

# 加入 JSX 的 Happy.js
import React, {Component} from "react";

class Happy extends Component {
  render() {
    return (
      
         I am happy! 
      
    );
  }
}

export default Happy;

# 修改 app.js
import React from "react";
import ReactDOM from "react-dom";
import Happy from "./Happy";
import "./style.css";
const hello = require("./hello.js");

ReactDOM.render(
  ,
  document.getElementById("root")
);

document.querySelector("#root").appendChild(hello());

重新编译后，就可以看到我们添加的 Happy 了。

对 Babel 的配置：

可以为 babel 新建一个 ‘.babelrc’ 来多带带配置 babel

# .babelrc:
{
  "presets": [ "env", "react"]
}

# webpack.config.js 去除 babel-loader 下的 options

使用插件

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。可以用来处理各种各样的任务。

使用 html-webpack-plugin, 它会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。

# 安装库
$ yarn add html-webpack-plugin

# 修改 webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
...
  output: {
    path: path.resolve(__dirname, "build"), // 打包后的文件存放的地方
    filename: "bundle.js" // 打包后输出文件的文件名
  },
...
  devServer: {
    contentBase: "./build",  // 本地服务器所加载的页面所在的目录
...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/index.tmpl.html")
    })
  ]
};

再编译"""$ yarn start"""。可以看到目录下生成了“build/”。

参考
https://doc.webpack-china.org...
https://www.jianshu.com/p/42e...

私有云混合云简单入门 linux简单入门 python简单入门 hadoop简单入门

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

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

Webpack3简单入门1

摘要：使用测试的使用教程。本工程代码创建工程安装新建一个配置文件内容添加工程内容内容内容编译运行说明如果过程中发生错误，会在工程根目录下自动生成文件。使用 yarn 测试 webpack 的使用教程。本工程代码创建工程 $ mkdir test-webpack-app-yarn $ cd test-webpack-app-yarn $ yarn init # ... 安装 webpac...

DrizzleX 2019-08-21 18:27 评论0 收藏0
ES6入门到进阶（一）：let、解构赋值、字符串模板、函数

摘要：注意问题，不在是运行时所在的对象箭头函数里面没有用箭头函数不能当构造函数下一篇入门到进阶二循环数组对象参考视频资料经典入门到进阶一、简介 ES6 -> ECMA 标准 ES6 -> 2015年6月 ES6.0 每年6月份，发布一个版本 ES6环境: webpack3.x Traceur 二、let、const 2.1 关于定义(声明)变量 var a=12; ...

WalkerXu 2019-08-26 11:47 评论0 收藏0
2017-06-21 前端日报

摘要：前端日报精选实践总结掘金第期动画与动效之四完全指南众成翻译个编码小技巧教程使用浏览器开发者工具检查动画性能众成翻译中文图书深入理解译变量的正确使用方法知乎专栏正式发布众成翻译来了知乎专栏代码运行过程简述一个人文章的中文 2017-06-21 前端日报精选 redux-react实践总结 - 掘金【第972期】HTML5动画与动效之四flexbox 完全指南 - 众成翻译19个Java...

Chao 2019-08-20 17:24 评论0 收藏0
webpack系列——webpack3导入jQuery的新方案

摘要：但是，有时候可能的一些库不够牛逼，还需要用到的相关插件来辅助完成，这些插件又和形成了依赖，最终，和我一样，你也可能需要在中导入。关于异步打包组件的方案，请看我的其他文章只要你使用了，无论是，还是开发者也同样适用这种方案本文的目的拒绝全局导入jQuery！！拒绝script导入jQuery！！找到一种只在当前js组件中引入jQuery，并且使用webpack切割打包的方案！测试...

amc 2019-08-21 17:44 评论0 收藏0
webpack系列——webpack3导入jQuery的新方案

摘要：但是，有时候可能的一些库不够牛逼，还需要用到的相关插件来辅助完成，这些插件又和形成了依赖，最终，和我一样，你也可能需要在中导入。关于异步打包组件的方案，请看我的其他文章只要你使用了，无论是，还是开发者也同样适用这种方案本文的目的拒绝全局导入jQuery！！拒绝script导入jQuery！！找到一种只在当前js组件中引入jQuery，并且使用webpack切割打包的方案！测试...

makeFoxPlay 2019-08-05 12:24 评论0 收藏0