步骤一:

npm init

步骤二:

npm install -D clean-webpack-plugin css-loader extract-text-webpack-plugin html-webpack-plugin mini-css-extract-plugin style-loader webpack webpack-cli webpack-dev-server

步骤三:

npm install -S jquery

步骤四:

创建 webpack.config.js

// 直接path

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin'); //

const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清除旧文件

var HtmlWebpackPlugin = require('html-webpack-plugin'); // 页面热加载

var webpack = require('webpack');

module.exports = {

  mode: 'development',

  entry: './main.js', // 入口文件

  output: { // 出口

    path: path.resolve(__dirname, 'dist'),

    filename: '[name].[hash].js' // 名称

  },

  devServer: { // webpack 本地服务

    contentBase: path.join(__dirname, 'dist'),

    compress: true,

    port: 9000

  },

  module: {

    rules: [

      {

        test: /\.css$/,

        use: ExtractTextPlugin.extract({

          fallback: "style-loader",

          use: "css-loader"

        })

      }

    ]

  },

  plugins: [ // 插件集

    new ExtractTextPlugin("[name].[hash].css"), // 输出css版本

    new CleanWebpackPlugin(['dist']), // 清除dist文件夹下的内容

    new HtmlWebpackPlugin({ // 自动生成html文件

      template: 'index.html'

    }),

    new webpack.ProvidePlugin({ // 引入第三方插件(自动加载模块)

      $: 'jquery',

      jQuery: 'jquery'

    }),

    new webpack.DefinePlugin({ // 定义全局变量

      'env': JSON.stringify('www://aaa/com')

    })

  ],

  optimization: {

    splitChunks: {

      filename: 'common.js',

      chunks: 'all'

    }

  }

};

步骤五：

package.json

{

  "name": "webpack_test",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "webpack-dev-server --inline",

    "build": "webpack"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "clean-webpack-plugin": "^0.1.19",

    "css-loader": "^0.28.11",

    "extract-text-webpack-plugin": "^3.0.2",

    "html-webpack-plugin": "^3.2.0",

    "mini-css-extract-plugin": "^0.4.0",

    "style-loader": "^0.21.0",

    "webpack": "^4.12.0",

    "webpack-cli": "^3.0.8",

    "webpack-dev-server": "^3.1.4"

  },

  "dependencies": {

    "jquery": "^3.3.1"

  }

}

步骤六：

项目目录

store/age.js

const age = 18;

module.exports = age;

store/name.js

const name = '小明';

module.exports = name;

main.js

// 引入 age.js

const age = require('./store/age.js');

// 引入 name.js

const name = require('./store/name.js');

import login from './style/common.css';

console.log(`${name}的年龄是${age}`);

index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>React App</title>

  </head>

  <body>

    <div>React App</div>

  </body>

</html>

.

webpack 项目实战的更多相关文章

  1. vue+webpack项目实战

    概述 -- 项目中会用到的插件 vue-router vue-resource 打包工具 webpack 依赖环境 node.js start 安装vue开发的模板 # 全局安装 vue-cli $ ...

  2. vue组件（Vue+webpack项目实战系列之三）

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.特别对于大型应用开发来说,尽量组件化,并且先造好轮子库,不要重复去写组件,这会显著提升项目 ...

  3. vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack项目实战系列之二）

    Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...

  4. webpack 教程 那些事儿04-webpack项目实战分析

    这节主要讲解真正项目用用到的 webpack配置问题,项目实战篇 就像我们不会完全做一个项目,不用别人的轮子一样.这个配置我们借用 vue-cli 搭建的配置来研究,因为它已经足够优秀. 有了前面的基 ...

  5. webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  6. Vue2+VueRouter2+webpack 构建项目实战（三）：配置路由，运行页面

    制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...

  7. Vue2+VueRouter2+webpack 构建项目实战（二）：目录以及文件结构

    通过上一篇博文<Vue2+VueRouter2+webpack 构建项目实战(一):准备工作>,我们已经新建好了一个基于vue+webpack的项目.本篇文章详细介绍下项目的结构. 项目目 ...

  8. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  9. Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表

    Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表:  Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述

随机推荐

  1. Selenium WebDriver- 使用显示等待，判断搜狗的输入框是否显示，按钮是否可点击，然后在输入光荣之路搜索词，然后在点击搜索。

    #encoding=utf-8 from selenium import webdriver import time from selenium.webdriver.common.by import ...

  2. loadrunner参数化数据分配方法

    数据分配方法: 在“Select next row“列表中选择一个数据分配方法,以指示在Vuser脚本执行期间如何从参数文件中取得数据.选项包括”Sequential“.“Random”.“Uniqu ...

  3. 《Python全栈开发指南》第3版 Alex著（LFXC2018）

    第一章 Python基础——Python介绍&循环语句 1.1 编程语言介绍 1.2 Python介绍 1.3 Python安装 1.4 第一个Python程序 1.5 变量 1.6 程序交互 ...

  4. php将数组写入到文件的三种方法

    php将数组原样写入或保存到文件有三种方法可以实现, 第一种方法是使用serialize, 第二种方法是使用print_r, 第三种方法是使用var_export, 本文章向大家介绍这三种方法是如何将 ...

  5. 如何用字体在网页中画icon

    一.用css雪碧图 1.简介 CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background- ...

  6. Leetcode 436.寻找右区间

    寻找右区间 给定一组区间,对于每一个区间 i,检查是否存在一个区间 j,它的起始点大于或等于区间 i 的终点,这可以称为 j 在 i 的"右侧". 对于任何区间,你需要存储的满足条 ...

  7. [错误处理]: How to deal with chrome failing to launch GPU process

    https://github.com/jupyter/notebook/issues/2836 "export BROWSER=google-chrome" command wor ...

  8. Spring 依赖注入(一、注入方式)

    首先装配一个实体类People package com.maya.model; public class People { private int id; private String name; p ...

  9. Welcome-to-Swift-03字符串和字符（Strings and Characters）

    String是例如“hello, world“”,“海贼王” 这样的有序的Character(字符)类型的值的集合,通过String类型来表示. Swift 的String和Character类型提供 ...

  10. hdoj--1045<dfs&二分图最大匹配>（这里是dfs解法）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1045 题目描述: 在矩阵中放车,车可四面攻击,矩阵中有墙,可以防止攻击,给出墙的位置,输出最多可以放多 ...