步骤一:

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. IO Streams：缓冲流

    我们迄今为止看到的大多数示例都使用无缓冲的I / O.这意味着每个读或写请求都由底层操作系统直接处理.这使程序效率变得很低,因为每个这样的请求经常触发磁盘访问,网络活动或一些相对昂贵的其他操作. 为了 ...

  2. java EE技术体系——CLF平台API开发注意事项（3）——API安全访问控制

    前言:提离职了,嗯,这么多年了,真到了提离职的时候,心情真的很复杂.好吧,离职阶段需要把一些项目中的情况说明白讲清楚,这篇博客就简单说一下在平台中对API所做的安全处理(后面讲网关还要说,这里主要讲代 ...

  3. Tyk-Hybrid模式安装—抽象方法论，重用它

    最近,公司有计划运用API网关.那么,在经过权衡之后,使用了Tyk的Hybrid模式!现在环境没问题了,API调用也测通了.我得想想合并服务,监控API实时情况的东西.但在这个环境搭建的过程中,我目前 ...

  4. 视频播放插件Video.js

    这是一个很强大的视频播放插件.

  5. 升级springboot 2.x 踩过的坑——跨域导致session问题

    目前IT界主流前后端分离,但是在分离过程中一定会存在跨域的问题. 什么是跨域? 是指浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域. 做过web后台的童鞋都知道,跨 ...

  6. d3 数据绑定

    绑定过程 选择元素,绑定数据,追加元素 <!DOCTYPE html> <html> <head> <title>testD3-.html</ti ...

  7. 【HDOJ6218】Bridge（线段树，set，网格图，连通性）

    题意:给定一张2×n的网格图,一开始矩阵所有相邻点之间有一条边 有q个询问,每次给出两个相邻的点的坐标,将其中的边删除或者添加,问如此操作之后整张图的割边数量     n,q<=2*10^5, ...

  8. [LeetCode] Rotate Image n-by-n矩阵顺时针旋转

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

  9. UPC 2219: A^X mod P

    题形:另类快速幂 题意: f(x) = K, x = 1 f(x) = (a*f(x-1) + b)%m , x > 1 Now, Your task is to calculate ( A^( ...

  10. hdu 5690(模运算)

    All X Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...