文档章节

webpack入门之教你搭建简单的框架

小良下山化了个缘
 小良下山化了个缘
发布于 2018/09/07 17:23
字数 1384
阅读 101
收藏 3

本文适合刚刚接触webpack,对webpack的配置不了解的人。

博主之前有使用vue-cli框架,仅仅停留在试用阶段,webpack配置几乎一无所知。通过看一些文档和教程,试着用webpack搭建了简单的框架。通过这次实践呢,对webpack配置多了一些浅显的认识。

安装webpack

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
  1. 安装完成之后,建一个空文件夹。使用npm init 命令创建一个package.json文件,输入这个命令后,终端会问你一些问题,可选择直接回车跳过。
    npm init
    
  2. 本项目中安装Webpack作为依赖包
// 安装Webpack
npm install --save-dev webpack

demo代码

demo目录结构:

app目录下是编写的源码文件,conf目录下是配置文件,dist下面是编译之后的文件。下面我们来一个个介绍。

(1)package.json

下载依赖包可以在文件中配置好一并下载,也可以根据需要一个个下载

npm install --save //放在package.json 的dependencies(运行环境需要的组件)
npminstall --save-dev //放在package.json 的devDependencies(运行环境不需要)
(2)webpack.config.js(demo里webpack.prduction.config.js是一样的,这里不重复,只有在实际项目中才会根据需要配置不同),代码的作用已经写到注释里面
const webpack = require('webpack'); //引入webpack

//这个插件的作用是依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新index.html。
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path')


module.exports = {
    //生成map调试文件,有多种类型,具体各种类型的优缺点请查阅相关资料
    devtool: 'eval-source-map',

    //“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录
    entry: "./app/main.js",//唯一入口文件
    output: {
        path: path.resolve(__dirname, '../build'),//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },

//配置本地本地服务器 需要的依赖 webpack-dev-server
    devServer: {
        contentBase: "./dist",//本地服务器所加载的页面所在的目录
        port:8088, //监听的端口号
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },

    //Loaders
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/, //用以匹配loaders所处理文件的拓展名的正则表达式(必须)
                use: {
                    loader: "babel-loader", //loader的名称(必须)Babel其实是一个编译JavaScript的平台,将es6,es7等这些标准编译成当前的浏览器完全的支持的语言;
                    options: {
                        presets: [
                            "es2015", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"//,style-loader将所有的计算后的样式加入页面中
                    }, {
                        loader: "css-loader", //css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },

    //插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。
    // Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说,loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个,
    //插件并不直接操作单个文件,它直接对整个构建过程其作用。
    plugins: [
        new webpack.BannerPlugin('版权所有,翻版必究'),
        new HtmlWebpackPlugin({
            template: "./app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
            //这里定义的模板位置,在build是会自动根据模板生成可用的html文件
        }),
        new webpack.HotModuleReplacementPlugin(),//热加载插件
        new webpack.optimize.OccurrenceOrderPlugin(),//为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID
        new webpack.optimize.UglifyJsPlugin(),//压缩JS代码;
        new ExtractTextPlugin("style.css") //分离CSS和JS文件
    ],
}
(3)入口文件main.js
//main.js 
import React from 'react';
import {render} from 'react-dom'; //yinyong react的方法
import Greeter from './Greeter'; //Greeter.js里面的Greeter方法
import './main.css';//导入css文件
render(<Greeter />, document.getElementById('root'));
(4)模板(index.tmpl.html),配置文件在编译的时候有配置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
</body>
(5)Greeter.js(业务逻辑,这里用的是react)
// Greeter.js
import React, {Component} from 'react'
import config from './config.json'; 
import styles from './Greeter.css';//导入样式,注意这里导入的样式制作用于greeter

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}>
        //内容是取配置文件里面的
        {config.greetText}
      </div>
    );
  }
}

export default Greeter
(6)配置文件,config.js一些数据配置
{
  "greetText": "Hi there and greetings from JSON"
}
(7)样式main.js 和 Greeter.js。内容就是普通的css样式,支持sass和less,有组件可以编译。在main.js和Greeter.js中引用

编译运行 写到这里基本上就是一个可运行的框架雏形了。

npm start //开发环境编译,编译生成文件在dist中
npm run server  //在本地服务器运行
npm run build  //生产环境编译,生成在build目录中

总结

本文介绍了一个机遇webpack的基本框架,从零开始都是自己配置的内容。本文的目的是希望通着这样的配置能够了解webpack的工作原理以及配置方法。博主通过这样的实践队webpack有了比较基础的理解。再回过头去看现在基于webpack的框架源码例如vue-cli就至少能做到心里有数了。

© 著作权归作者所有

小良下山化了个缘
粉丝 2
博文 43
码字总数 22469
作品 0
西安
后端工程师
私信 提问
个人分享--web前端学习资源分享

1.前言 时间过得真快,转眼间现在是2017年最后一个星期,而今天也是圣诞节,过几天也是元旦了。每到年底,大家都习惯总结和分享,我也不例外。但是经历,我之前已经发过了,那么我今天就分享...

2017/12/25
0
0
Web 使用webpack构建前端项目

好久没写技术博客了, 原因在于最近在学习前端方面的技术, 熟悉我的同学都知道, 之前我有使用Vue搭建了一个个人简历, 体验了一把最新的前端技术, 但之前我们使用的是vue-cli脚手架工具, 对于如...

Castie1
2017/09/23
0
0
库&插件&框架&工具

nodejs 入门 nodejs 入门教程,大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署,可能大多数前端工程师...

掘金官方
2018/01/08
0
0
Webpack入门到精通(1)

前言 什么是webpack 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中...

励步前端团队
05/21
0
0
React+Redux仿Web追书神器

引言 由于现在做的react-native项目没有使用到redux等框架,写了一段时间想深入学习react,有个想法想做个demo练手下。由于正好在学习开源的Android小说阅读器--任阅,开始边学边做,项目地址...

golike
2017/12/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

多个数组排列问题

有时候会有需求 从N个数组个各取1个元素组成新数组,问有多少种可能,分别是什么?(这里假设不涉及重复元素和顺序影响) 类似 [a,b,c,d],[1,2],[A,B,F] 3个数组个各取一个元素组成新数组,共计...

chro008
5分钟前
0
0
mongodb中的_id的ObjectId的生成规则

https://www.cnblogs.com/weilunhui/p/6861938.html

Java搬砖工程师
10分钟前
0
0
ngx限流模块

服务器流量异常,负载过大 ngx_http_limit_conn_module模块实现对同一个 ip 的连接数,并发数进行限制。 语法: limit_conn_zone $variable zone=name:size; 描述会话状态存储区域。键的状态中...

SibylY
14分钟前
0
0
大型网站架构系列:电商网站架构案例(3)

大型网站架构系列:电商网站架构案例(3) 本文章是电商网站架构案例的第三篇,主要介绍数据库集群,读写分离,分库分表,服务化,消息队列的使用,以及本电商案例的架构总结。 6.5数据库集群(...

linzhuangrong
16分钟前
0
0
技术文章收集

1. Java Web 程序员,我们一起给程序开个后门吧:让你在保留现场,服务不重启的情况下,执行我们的调试代码 gitHub

近在咫尺远在天涯
22分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部