步骤一:

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 import unittest import time from selenium import webdriv ...

  2. 关于面试总结-SQL学生表

    前言 每次面试必考SQL,小编这几年一直吃SQ的亏,考题无非就是万年不变学生表,看起来虽然简单,真正写出来,还是有一定难度.于是决定重新整理下关于SQL的面试题,也可以帮助更多的人过SQL这一关. 作 ...

  3. python - 字符串的格式化输出

    # -*- coding:utf-8 -*- '''@project: jiaxy@author: Jimmy@file: study_2_str.py@ide: PyCharm Community ...

  4. 紫书第三章训练1 D - Crossword Answers

    A crossword puzzle consists of a rectangular grid of black and white squares and two lists of defini ...

  5. ubuntu-64位安装tensorflow

    (一)ubuntu-64位安装tensorflow过程: 1安装Anaconda 然后执行:bash Anaconda×××-Linux-x86_64.sh ,然后一直enter键,中途会遇到([y] ...

  6. 计算器（bzoj 2242）

    Description 你被要求设计一个计算器完成以下三项任务: 1.给定y,z,p,计算Y^Z Mod P 的值: 2.给定y,z,p,计算满足xy≡ Z ( mod P )的最小非负整数: 3.给 ...

  7. Using a USB host controller security extension for controlling changes in and auditing USB topology

    Protecting computer systems from attacks that attempt to change USB topology and for ensuring that t ...

  8. Git基础篇【转】

    转自:https://i.cnblogs.com/EditPosts.aspx?opt=1 1.设置名字与邮箱 $ Git config –global user.name “YourName” $ ...

  9. 定位 UNIX 上常见问题的经验总结

    本文主要对 UNIX 平台常见的问题进行了分类,介绍一些常见问题分析时使用的方法和命令,对以下三种常见问题的分析方法做了简单介绍:UNIX 下 Crash 问题的分析方法.UNIX 下内存泄露问题的分 ...

  10. idea http请求的插件（测试接口方便）

    http://blog.csdn.net/winter_chen001/article/details/77249029