安装

本地安装

npm install --save-dev webpack
npm install --save-dev webpack-cli   //4.x以上版本,用于cli命令

全局安装

npm install -g webpack
npm install -g webpack-cli

初始化项目

npm init -y  //自动生成一个package.json文件
npm install webpack webpack-cli --save-dev

基本目录结构

webpack配置表

按项目结构编写代码

//package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

//webpack.config.js

const path = require('path');

    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

//index.html

<!doctype html>
<html>
  <head>
    <title>demo</title>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

//index.js

function component() {

    var element = document.createElement('div');
    var node = document.createTextNode("hello,webpack!");
    element.appendChild(node);
    return element;
}
document.body.appendChild(component());

下载安装包

//production模式
npm install --save [+安装包名称]

//development模式
npm install --save-dev

运行项目

以项目脚本为入口起点,输出main.js

npx webpack

添加npm脚本到package.json设置一个快捷方式运行本地的webpack

//package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"  //新增
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

loader

加载css文件

react默认不支持css文件,所以需要进行转码.
// webpack.config.js

   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       }
     ]
   }

加载图片

    module: {
      rules: [
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
       }
    ]
   }

加载字体

    module: {
      rules: [

       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [
           'file-loader'
         ]
       }
      ]
    }

加载数据

    module: {
      rules: [
       {
         test: /\.(csv|tsv)$/,
         use: [
           'csv-loader'
         ]
       },
       {
         test: /\.xml$/,
         use: [
           'xml-loader'
         ]
       }
      ]
    }

全局资源

通过这些方式加载资源,更加直观和可移植

插件的使用

比如使用一个HtmlWebpackPlugin

安装
npm install --save-dev html-webpack-plugin
使用
const HtmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = {
    entry: './src/index.js',

+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],

    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

source map

准确追踪错误和警告

// webpack.config.js

    const path = require('path');

    module.exports = {
      entry: './src/index.js',
+     devtool: 'source-map',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

开发工具

帮助你在代码发生变化后自动编译代码

有webpack's Watch Mode,webpack-dev-server,webpack-dev-middleware 三种.开发常用webpack-dev-server

安装

npm install --save-dev webpack-dev-server

使用

//webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
+   devServer: {
+     contentBase: './dist'
+   },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

webpack基本使用教程的更多相关文章

  1. WebPack 简明学习教程

    WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...

  2. webpack 的使用教程

    webpack 的使用教程 今天接触webpack,就着官网上的教程一步一步的玩,把自己的理解总结以便和大家交流 webpack的主要特点 1. 可以把js,css,image,甚至文本当成模块来处理 ...

  3. webpack快速掌握教程

    转载http://yijiebuyi.com/blog/46fb97b11fb8f4055e0b04d1cecb1f69.html #为什么用webpack 如果我们 前端 javascript 能像 ...

  4. Webpack新手入门教程(学习笔记)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...

  5. Webpack简易入门教程

    <!-- 其实网上关于webpack的教程已经很多了,但是本人在学习过程中发现很多教程有错误,或者写的很不全面,结果做的过程出现各种各样的问题,对新手不但不友好还会让人浪费很多不必要的时间.所以 ...

  6. webpack轻松入门教程

    webpack之傻瓜式教程及前端自动化入门 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpa ...

  7. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  8. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  9. webpack CommonsChunkPlugin详细教程

    1.demo结构: 2.package.json配置: { "name": "webpack-simple-demo", "version" ...

  10. webpack入门操作教程

    1. webpack介绍 在传统的项目中,一个html文件可能会加载多个js.css文件,如果多人协同开发的话,就会出现全局变量被污染.文件直接的依赖问题 而webpack打包工具,会先分析入口文件的 ...

随机推荐

  1. excel2010冻结行列

    https://jingyan.baidu.com/article/a24b33cd56f6bd19ff002b7c.html

  2. 微信小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...

  3. rest-framework框架组件

    序列化组件 创建一个序列化类, 视图四种方式 以下代码都需要创建一个serializers.py文件 from rest_framework import serializers from CBV_a ...

  4. TestGc finalize()

    package com.gc; public class TestGc { public static void main(String[] args) { Man man = new Man(&qu ...

  5. spring的总结

    1. 第一天 问题:怎样的程序是一个优秀的程序 可维护性好,可扩展性好,性能优秀 问题:业界对象提供什么的概念 高内聚,低耦合,也就是尽量使代码对应的功能写在对应的模块,并且尽量减少类与类之间的关系, ...

  6. python pandas使用一些协程

    import pandas as pd def coroutine(func): """装饰器:向前执行到第一个`yield`表达式,预激`func`"&quo ...

  7. pxe-kickstart

    PXE client--->DHCP(pxelinux.0;  next-server  tftp-server) syslinux   vmlinuz initrd.img ks.cfg--- ...

  8. linux下对应mysql数据库的常用操作

    ssh管理工具连接mysql数据库. 一.连接mysql数据库: 通过shh管理工具,登录linux的用户名,密码,进入ssh的命令行界面后,执行如下命令: mysql -u 数据库用户名 -p 然后 ...

  9. jqueyr validtion的使用

    江北机场对validtion的扩展 <script type="text/javascript"> $.validator.setDefaults({ /*关闭键盘输入 ...

  10. 10个重要的算法C语言实现源代码

    包括拉格朗日,牛顿插值,高斯,龙贝格,牛顿迭代,牛顿-科特斯,雅克比,秦九昭,幂法,高斯塞德尔 .都是经典的数学算法,希望能开托您的思路.转自kunli.info 1.拉格朗日插值多项式 ,用于离散数 ...