安装

本地安装

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. HTML-★★★★★JavaScritp简介与语法★★★★★

    简介: 1.什么是JavaScript? 它是个脚本语言,作用是使 HTML 页面具有更强的动态和交互性,它需要有宿主文件,它的宿主文件就是html文件.  JavaScript 是 Web 的编程语 ...

  2. 标准结构篇：2）O型橡胶密封圈

    本章目的:设计出符合行业要求的O型橡胶密封圈,不必再为一而再,再而三的测试漏水而烦恼. 1.前言 O型橡胶密封圈,简称O型圈,是密封圈的一种,也是最有代表性的标准结构件.顾名思义,它的目的在于密封.密 ...

  3. CDQZ Day5

    1DP #1题目名称 题目名称匹配块路径染色输入文件名 输入文件名match.in.in.inblock.inpath.inpaint.in输出文件名 输出文件名match.out.out.out.o ...

  4. SPOJ - COT 路径构造主席树

    题意:给出一个带权树,多次询问路径\((u,v)\)的第k小权值 这是主席树往区间扩展到树上的套路题 由于是按路径查询,我们无法使用dfs序,但可利用主席树对父亲扩展的方法构造出链 因此要用dfs构造 ...

  5. Vue.js 使用注意事项

    Vue.js 使用注意事项 1 过滤器主要用于简单的文本转换,如果要实现复杂的数据变换,应使用计算属性 指令的使用 v-bind基本用于HTML元素上的属性,如id.class.href.src等 v ...

  6. UVALive - 6436、HYSBZ - 2435 (dfs)

    这两道题都是用简单dfs解的,主要是熟悉回溯过程就能做,据说用bfs也能做 道路修建(HYSBZ - 2435) 在 W 星球上有n 个国家.为了各自国家的经济发展,他们决定在各个国家 之间建设双向道 ...

  7. jq扩展获取表单值、设置值

    不多说,直接上代码 //jq添加插件 (function (window, $) { $.fn.serializeJson = function () { var serializeObj = {}; ...

  8. 2019年UX设计新趋势

    UX设计总是在不断变化中.最近短短两年的时间里,我们已经看到,很多地方都大规模采用颠覆性技术,比如语音用户界面,混合现实和智能家居设备.设计这些体验的实际过程可能保持不变,但新技术的出现引发了新的行为 ...

  9. js中的new操作符与Object.create()的作用与区别

    js中的new操作符与Object.create()的作用与区别 https://blog.csdn.net/mht1829/article/details/76785231 2017年08月06日 ...

  10. Robot Framework_Ride（Run标签）

    前言 我一直在想 Robot Framework 不要 RIDE 可不可以.对于编写测试用例来说,只要掌握 RobotFramework 的语法规则,随便在一个你顺手的编辑器下编写也没问题,甚至效率更 ...