1.安装： npm install --save-dev webpack         npm install --save-dev webpack@<version>

如果是webpack 4+ ,安装 CLI        npm install --save-dev webpack-cli 。

2.创建demo

  1. mkdir webpack-demo && cd webpack-demo
  2. npm init -y
  3. npm install webpack webpack-cli --save-dev

3.调整安装包为私有，移除main接口，需在package.json里面修改，增加private，去掉main。

  1.   {
  2.     "name": "webpack-demo",
  3.     "version": "1.0.0",
  4.     "description": "",
  5. +   "private": true,
  6. -   "main": "index.js",
  7.     "scripts": {
  8.       "test": "echo \"Error: no test specified\" && exit 1"
  9.     },
  10.     "keywords": [],
  11.     "author": "",
  12.     "license": "ISC",
  13.     "devDependencies": {
  14.       "webpack": "^4.0.1",
  15.       "webpack-cli": "^2.0.9"
  16.     },
  17.     "dependencies": {}
  18.   }

4.创建一个 bundle 文件，在该文件夹下新建src/index.js, dist/index.html

然后安装lodash      npm install --save lodash ,新建文件内容如下，命令行输入npx webpack。在浏览器中打开 index.html，页面会出现在index.js加的内容。总结 ：执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。这个时候查看dist文件夹，会看到文件多出了一个main.js

注：安装一个要打包到生产环境的安装包时，使用 npm install --save，安装一个用于开发环境的安装包（例如，linter, 测试库等），应该使用 npm install --save-dev。

  1.   <!doctype html>
  2.   <html>
  3.    <head>
  4.      <title></title>
  5.    </head>
  6.    <body>
  7. +    <script src="main.js"></script>
  8.    </body>
  9.   </html>

index.js

  1. + import _ from 'lodash';
  2. +
  3.   function component() {
  4.     var element = document.createElement('div');
  5.     element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  6.     return element;
  7.   }
  8.   document.body.appendChild(component());

5.使用配置文件，在该文件夹下新建webpack.config.js，配置如下，再次执行构建：npx webpack。

如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。可以使用 --config 传递任何名称的配置文件，这对于需要拆分成多个文件的复杂配置是非常有用。比如npx webpack --config webpack.config.js。

比起 CLI 这种简单直接的使用方式，配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rules)、插件(plugins)、解析选项(resolve options)，以及许多其他增强功能。

这个时候dist文件就会多一个bundle.js。

  1. const path = require('path');
  2.  
  3. module.exports = {
  4.   entry: './src/index.js',//入口文件
  5.   output: {//输出文件
  6.     filename: 'bundle.js',
  7.     path: path.resolve(__dirname, 'dist')
  8.   }
  9. };

6.NPM 脚本。设置快捷方式，在package.json中scripts里面添加。

  1.  {
  2.     "name": "webpack-demo",
  3.     "version": "1.0.0",
  4.     "description": "",
  5.     "main": "index.js",
  6.     "scripts": {
  7.       "test": "echo \"Error: no test specified\" && exit 1",
  8. +     "build": "webpack"
  9.     },
  10.     "keywords": [],
  11.     "author": "",
  12.     "license": "ISC",
  13.     "devDependencies": {
  14.       "webpack": "^4.0.1",
  15.       "webpack-cli": "^2.0.9",
  16.       "lodash": "^4.17.5"
  17.     }
  18.   }

现在可以使用 npm run build 命令，来替代npx 命令。

通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。

7.加载 CSS。

为了从 JavaScript 模块中 import 一个 CSS 文件，需要在 module 配置中 安装并添加 style-loader 和 css-loader：  npm install --save-dev style-loader css-loader。可以在依赖于此样式的文件中 import './xx.css'。现在，当该模块运行时，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。

在webpack.config.js中增加配置如下。

  1.  const path = require('path');
  2.  
  3.   module.exports = {
  4.     entry: './src/index.js',
  5.     output: {
  6.       filename: 'bundle.js',
  7.       path: path.resolve(__dirname, 'dist')
  8.     },
  9. +   module: {
  10. +     rules: [
  11. +       {
  12. +         test: /\.css$/,
  13. +         use: [
  14. +           'style-loader',
  15. +           'css-loader'
  16. +         ]
  17. +       }
  18. +     ]
  19. +   }
  20.   };

8.加载图片和加载字体，file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括字体，这里举例file-loader：npm install --save-dev file-loader

  1.  const path = require('path');
  2.  
  3.   module.exports = {
  4.     entry: './src/index.js',
  5.     output: {
  6.       filename: 'bundle.js',
  7.       path: path.resolve(__dirname, 'dist')
  8.     },
  9.     module: {
  10.       rules: [
  11.         {
  12.           test: /\.css$/,
  13.           use: [
  14.             'style-loader',
  15.             'css-loader'
  16.           ]
  17.         },
  18. +       {
  19. +         test: /\.(png|svg|jpg|gif)$/,
  20. +         use: [
  21. +           'file-loader'
  22. +         ]
  23. +       },
  24. +       {
  25. +         test: /\.(woff|woff2|eot|ttf|otf)$/,
  26. +         use: [
  27. +           'file-loader'
  28. +         ]
  29. +       }
  30.       ]
  31.     }
  32.   };

9.加载数据。

可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。要导入 CSV、TSV 和 XML，可以使用 csv-loader 和 xml-loader：npm install --save-dev csv-loader xml-loader。

  1. +       {
  2. +         test: /\.(csv|tsv)$/,
  3. +         use: [
  4. +           'csv-loader'
  5. +         ]
  6. +       },
  7. +       {
  8. +         test: /\.xml$/,
  9. +         use: [
  10. +           'xml-loader'
  11. +         ]
  12. +       }

webpack 基础的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  3. 搭建webpack基础配置

    搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...

  4. nodejs+gulp+webpack基础知识

    nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...

  5. Webpack基础学习

    Webpack基础学习:https://segmentfault.com/a/1190000008853009

  6. 学习webpack基础笔记01

    学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...

  7. 【webpack】---模块打包机webpack基础使用---【巷子】

    001.什么是webpack? 作用有哪些? WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Ty ...

  8. Webpack -- 基础篇

    篇仅演示 webpack 的基础搭建,为入门和走通基本流程而写.仅 window 系统. 1. 安装一些东西 安装 nodeJS,下载链接.然后检查安装是否完成. 系统“开始”和“R”键同时按住,桌面 ...

  9. webpack基础知识点

    webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler). 入口(Entry) webpack 将创建所有应用程序的依赖关系图表(dependency ...

  10. webpack基础知识

    一.基础 1 安装 npm i -g webpack webpack-cli // 推荐安装至本地 npm i -D webpack webpack-cli 2 webpck基础使用 2.1 webp ...

随机推荐

  1. 旧文备份: CANopen的LSS子协议中文翻译

    有关节点地址和网络波特率的在线设置等:下载

  2. sup inf max min

    来自这里,觉得定义和举例都是最清楚的.http://www.math.illinois.edu/~ajh/347.summer14/completeness.pdf

  3. Python 初始—(文件操作)

    文件修改,我们可以不用讲一个文件全部都进行读取,然后放入内存,如果文件过大,容易造成内存的 内存溢出问题 因此我们可以便读取边进行修改操作 f=open("old.txt",&qu ...

  4. java使用优先级队列实现哈夫曼编码

    思路: 构建小根堆 根据小根堆实现哈夫曼树 根据哈夫曼树对数据进行编码 代码实现如下: /** * @Author: DaleyZou * @Description: 使用java实现一个哈夫曼编码的 ...

  5. Percona-Tookit工具包之pt-mext

      Preface       We are always obliged to analyze many outputs generated by various tools directly ev ...

  6. C#基础-面向对象-多态

    多态,不同对象对同一方法的不同实现 使用abstract关键字表示抽象类 // 表示是一个抽象类 public abstract class Animal { private string name; ...

  7. JZOJ| 5910. DuLiu

    Description          LF是毒瘤出题人中AK IOI2019,不屑于参加NOI的唯一的人.他对人说话,总是满口垃圾题目者也,教人半懂不懂的.因为他姓李,别人便从QQ群上的“毒瘤李F ...

  8. 【转载】CentOS7.0下安装Telnet

    1..先检查CentOS7.0是否已经安装以下两个安装包:telnet-server.xinetd.命令如下: # rpm -qa telnet-server # rpm -qa xinetd 如果没 ...

  9. 477. Total Hamming Distance

    class Solution { public: int totalHammingDistance(vector<int>& nums) { ; ; i < ; i++) { ...

  10. Aizu：0005-GCD and LCM

    GCD and LCM Time limit 1000 ms Memory limit 131072 kB Problem Description Write a program which comp ...