步骤一:

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. ip 核生成 rom 及questasim仿真时需要注意的问题

    IP 核生成 ROM 步骤1:Tools --> MegaWizard Plug-In Manager 步骤2:Create a new custom megafuction variation ...

  2. Leetcode 483.最小好进制

    最小好进制 对于给定的整数 n, 如果n的k(k>=2)进制数的所有数位全为1,则称 k(k>=2)是 n 的一个好进制. 以字符串的形式给出 n, 以字符串的形式返回 n 的最小好进制. ...

  3. Django多变关联、增加数据、删除数据

    建立表之间的关联关系: models.py里面对表的字段及外键关系的设置如下: from django.db import models # Create your models here. #出版社 ...

  4. [Uiautomator篇][2] UiDeviceAPI介绍

    1 https://developer.android.com/training/testing/ui-testing/uiautomator-testing.html  http://www.cnb ...

  5. 【java基础 14】锁的粒度：ThreadLocal、volatile、Atomic和Synchronized

    导读:题目中提到的几个关键字,分别是解决并发问题中,加锁所使用到的几个关键字,每个关键字代表的锁的粒度 不同,本篇博客,主要是从概念定义上,区分这几个关键字的应用场景.(PS:睡梦中,依稀记得有回面试 ...

  6. div固定在屏幕底部

    项目中需要实现div一直显示在屏幕的底部,不管页面有多长或者多端都需要满足. 在网上找的用js实现的,移动时会闪动,效果不是特别好.也可能是没找到好的. 相比js,我更希望使用css实现 1 < ...

  7. 项目记事【Hibernate-1】：调用 saveOrUpdate() 方法出错

    Hibernate 版本:3.3.1 背景: 后端编辑一个对象,该对象(ProductDO)下,有一个另一个自定义对象(ProductLiabilityDO)的 OneToMany 关系,如下: @O ...

  8. Linux Shell系列教程之（一）Shell简介

    本文是Linux Shell系列教程的第(一)篇,更多shell教程请看:Linux Shell系列教程 想要学习linux,shell知识必不可少,今天就给大家来简单介绍下shell的基本知识. S ...

  9. 在Ubuntu中，用mvn打包hadoop源代码时报错，正在解决中！！！

    报错信息如下: (各种配置在最后面) hadoop@administrator-virtual-machine:~/Downloads/tar/hadoop-3.0.0-alpha1-src$ mvn ...

  10. [LOJ#515]「LibreOJ β Round #2」贪心只能过样例

    [LOJ#515]「LibreOJ β Round #2」贪心只能过样例 试题描述 一共有 \(n\) 个数,第 \(i\) 个数 \(x_i\) 可以取 \([a_i , b_i]\) 中任意值. ...