安装

本地安装

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. executeQueryForObject returned too many results.

    //错误位置: 这个错误出现在持久层与数据库交互时,原因是 queryForObject这个方法封装唯一值,但是给出的sql语句返回了多个值 public int getListCount(SqlMa ...

  2. js 平均分割

    let alllist=res.data; var result = []; for (var i = 0; i < alllist.length; i += 3) { result.push( ...

  3. 04. H5标签有哪些？行内元素有哪些？块级元素有哪些？空(void)元素有哪些？行内元素和块级元素有什么区别？你工作中常用标签有什么？

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  4. centos的基本命令01

    01:创建用户命令 useradd liulaoshi # 创建用户 passwd liulaoshi # 设置密码, 回车后会提示让你输入两次密码 1.用户列表文件:/etc/passwd/ 2.用 ...

  5. Redis+Lua实现限流

    相比Redis事务来说,Lua脚本有以下优点减少网络开销: 不使用 Lua 的代码需要向 Redis 发送多次请求, 而脚本只需一次即可, 减少网络传输;原子操作: Redis 将整个脚本作为一个原子 ...

  6. Kubeadm and Kops

    Kubeadm是Kubernetes官方推出的快速部署Kubernetes的集群工具,其思路是将Kubernetes相关服务容器化以简化部署. With the release of kubeadm ...

  7. Oracle PL/SQL编程之函数

    注: 以下测试案例所用的表均来自与scott方案,使用前,请确保该用户解锁. 代码的执行环境是在sqlplus中 1.简介 函数用于返回特定的数据,当建立函数时,函数头部必须包含return子句,而在 ...

  8. VS2013诡异问题，虚方法、泛型，通通躺枪

    最近在调代码,发现一个很诡异的问题,简单复原一下 创建4.0控制台项目 以下代码 class Program { static void Main(string[] args) { var item ...

  9. 加载 Firefox 配置

    有小伙伴在用脚本启动浏览器时候发现原来下载的插件不见了,无法用 firebug在打开的页面上继续定位页面元素,调试起来不方便 .加载浏览器配置,需要用 FirefoxProfile(profile_d ...

  10. ArrayList、Vector和LinkedList等的差别与用法(基础回顾)

    ArrayList 和Vector是采取数组体式格式存储数据,此数组元素数大于实际存储的数据以便增长和插入元素,都容许直接序号索引元素,然则插入数据要设计到数组元素移动等内存操纵,所以索引数据快插入数 ...