还不打算去认识一下webpack?

前言

随我来,去看看webpack!(为时未晚)============》第一版(较浅显的知识,懂得可忽略本文)

方向

安装,起步搭建运行. (粗略代过)
对于资源的管理,对于输出的管理. (举例介绍)
本地开发 (基础服务)
热更新=[模块热替换] (初步认识)

1.初步构建

mkdir webpack_demo &amp;&amp; cd webpack_demo   // 新建一个文件 并进入更目录 `mkdir 是linux命令`

npm init -y   // 初始一个packjage.json文件  -y 表示跳过询问步骤...

//安装webpack

npm install webpack --save-dev  // 添加webpack-cli依赖到"devDependencies"

//webpack4.0+ 需要安装webpack-cli

 npm install webpack-cli --save-dev  // 添加webpack-cli依赖到"devDependencies"  

</pre>

//生成如下目录

├── package.json

├── src //源目录(输入目录)

│ ├── index.js

├── dist // 输出目录

│ ├── index.html

// 修改 `dist/index.html`

&lt; !DOCTYPE html&gt;

&lt;html lang="en"&gt;

    &lt;head&gt;

        &lt;meta charset="UTF-8"&gt;

        &lt;title&gt;webpack_demo&lt;/title&gt;

    &lt;/head&gt;

    &lt;body&gt;

            &lt;script src="main.js"&gt;&lt;/script&gt;   //为什么是main.js下面会解释

    &lt;/body&gt;

&lt;/html&gt;

//修改`src/index.js    `

 function component() {

   var element = document.createElement('div');

     element.innerHTML = "整一个盒子"

     return element;

  }

  document.body.appendChild(component());</pre>

<blockquote>

<code> npx webpack</code> (Node 8.2+ 版本提供的 npx 命令) <br><code>node node_modules/.bin/webpack</code> (8.2-版本)</blockquote>

<h5>会将我们的脚本作为<code>入口起点</code>，然后 输出 为 <code>main.js</code>.</h5>

<blockquote>

<code>打开dist/index.html  你将会看到 </code>整一个盒子<code> 几个字样~</code>

</blockquote>

<h3>2.资源管理,输出管理.基本开发起步</h3>

//生成如下目录

├── package.json

|── webpack.config.js //webpack配置文件

├── src //源目录(输入目录)

│ ├── index.js

├── dist // 输出目录

│ ├── index.html

先介绍一个Lodash库它是一个一致性、模块化、高性能的 JavaScript 实用工具库模块化处理非常适合值操作和检测(说白了就是webpack用了我也试试...)
lodash相关文档
npm install lodash --save //非仅在开发的时候使用的依赖就是需要打包到生产环境的包不加-dev



// src/index.js

import _ from 'lodash';

function component() {

   var element = document.createElement('div');

     element.innerHTML = _.join(['lodash','webpack'],'');   //join将 array 中的所有元素转换为由''分隔的字符串 其它函数可以自己实践

     return element;

 }</pre>

<blockquote><code>打开index页面输出 loadshwebpack</code></blockquote>

//webpack.config.js

const path = require('path');

module.exports = {

entry: './src/index.js', //入口

output: { //出口

filename: 'main.js', //打包之后脚本文件名称

path: path.resolve(__dirname, 'dist') //路径指向执行 js 文件的绝对路径此处为/dist

}

};

执行npx webpack --config webpack.config.js (把之前dist目录下main.js删除) 新的脚本生成(其实没多大变化..)

//  配置一下package.json

  "scripts": {

    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",

    "build": "webpack"     //添加此行命令 下次执行打包就是 npm  run  build 相当于上面的npx webpack --config webpack.config.js

  },

// 资源的配置 css 图片 js等等.. 举例 css 图片

</pre>

<blockquote>

<code>npm install --save-dev style-loader css-loader</code>   css的loader<br><code>npm install --save-dev file-loader</code>  file(图片)对象的 loader</blockquote>

//生成如下目录

├── package.json

|── webpack.config.js //webpack配置文件

├── src //源目录(输入目录)

│ ├── index.js
│ ├── index.css
│ ├── icon.jpg

├── dist // 输出目录

│ ├── index.html

//修改webpack.config.js

    const path = require('path');  //path路径模块

    module.exports = {

      entry: './src/index.js',   //入口

      output: {   //出口

        filename: 'main.js',

        path: path.resolve(__dirname, 'dist')

      },

      module: {

         rules: [

           {

             test: /\.css$/,  //检测正则匹配.css结尾的文件

             use: [           //使用俩个loader

               'style-loader',

               'css-loader'

             ]

           },

           {

             test: /\.(png|svg|jpg|gif)$/,  //正则匹配.png svg jpg gif结尾的文件

             use: [    //使用file-loader

               'file-loader'

             ]

           }

         ]

       }

    };

 //修改src/index.css

    div{

        color:red;

    }

 //修改src/index.js

     import _ from 'lodash';

     import "./index.css";

     import Icon from './icon.jpg';

      function component() {

        var element = document.createElement('div');

        element.innerHTML = _.join(['loadsh', 'webpack'], ' ');

        var myIcon = new Image();

        myIcon.src = Icon;

        element.appendChild(myIcon);

        return element;

      }

      document.body.appendChild(component());

</pre>

<blockquote>

<code>npm run build(删除之前的dist目录下main.js)  你会看红字和图片</code>  以上就是资源管理的简短介绍</blockquote>

<blockquote>

<code>npm install --save-dev html-webpack-plugin   安装html-webpack-plugin模块</code> 模块用到功能:<br>  1： 动态添加每次compile后 js css 的hash<br>  2:  可配置多页面 单页面 这些 <br>  3： 其它没涉及到<br><code>npm install clean-webpack-plugin --save-dev 清除dist文件夹(每次删除麻烦了..)</code>配置一下</blockquote>

//修改目录

├── package.json

|── webpack.config.js //webpack配置文件

├── src //源目录(输入目录)

│ ├── app.js
│   ├── print.js

│   ├── index.css

│   ├── icon.jpg

├── dist // 输出目录

│   ├── index.html

//webpack.config.js  ===============================================

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

  entry: {

    app: './src/index.js',

    print: './src/print.js'

  },

  output: {

    filename: '[name].bundle.js',

    path: path.resolve(__dirname, 'dist')

  },

  plugins: [

       new CleanWebpackPlugin(['dist']),

     new HtmlWebpackPlugin({

       title: 'webpack_demo'

     })

  ],

  module: {

     rules: [

       {

         test: /\.css$/,

         use: [

           'style-loader',

           'css-loader'

         ]

       },

       {

         test: /\.(png|svg|jpg|gif)$/,

         use: [

           'file-loader'

         ]

       }

     ]

   }

};

//修改src/index.js ===================================================

 import _ from 'lodash';   //引入lodash模块

 import "./index.css";     // index.css

 import Icon from './icon.jpg';   // 图片

 import printMe from "./print.js"    // printJS

  function component() {

    var element = document.createElement('div');  //创建一个元素

    element.innerHTML = _.join(['loadsh', 'webpack'], ' ');  // lodash中_.join方法

    var myIcon = new Image(); //创建一个图片

    myIcon.src = Icon;    //src赋值

    element.appendChild(myIcon);   //追加图片

    var btn = document.createElement('button');  //创建按钮

    btn.innerHTML = 'Click me and check the console!';   //内容赋值

    btn.onclick = printMe;   //添加事件

    element.appendChild(btn);   //追加元素

    return element;

  }

  document.body.appendChild(component());   //追加元素到body中

  //修改src/print.js  ==========================================

  export default function printMe() {

      console.log('from print.js');

  }

npm run build 会发现基本webpack的配置之后 ,有点模样(意思)了 打开页面index.html正常访问

3.本地开发

npm install --save-dev webpack-dev-server "webpack-dev-server" 为你提供了一个简单的 web 服务器，并且能够实时重新加载

 //修改webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

module.exports = {

  entry: {

    app: './src/index.js'

  },

  output: {

    filename: '[name].bundle.js',

    path: path.resolve(__dirname, 'dist')

  },

  devServer: {

     contentBase: './dist'

  },

  plugins: [

       new CleanWebpackPlugin(['dist']),

     new HtmlWebpackPlugin({

       title: 'webpack_demo'

     })

  ],

  module: {

     rules: [

       {

         test: /\.css$/,

         use: [

           'style-loader',

           'css-loader'

         ]

       },

       {

         test: /\.(png|svg|jpg|gif)$/,

         use: [

           'file-loader'

         ]

       }

     ]

   }

};

//修改package.json

...

"scripts": {

    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",

    "start": "webpack-dev-server --open", //start命令

    "build": "webpack"

 },

 ...

npm run start 本地起了8080端口的服务,你也可以看到自己的页面

4.热更新

//修改webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

module.exports = {

  entry: {

    app: './src/index.js'

  },

  output: {

    filename: '[name].bundle.js',

    path: path.resolve(__dirname, 'dist')

  },

  devServer: {

     contentBase: './dist',

     hot: true

  },

  plugins: [

       new CleanWebpackPlugin(['dist']),

     new HtmlWebpackPlugin({

       title: 'webpack_demo'

     }),

     new webpack.NamedModulesPlugin(),

     new webpack.HotModuleReplacementPlugin()

  ],

  module: {

     rules: [

       {

         test: /\.css$/,

         use: [

           'style-loader',

           'css-loader'

         ]

       },

       {

         test: /\.(png|svg|jpg|gif)$/,

         use: [

           'file-loader'

         ]

       }

     ]

   }

};

npm run start 运行http://localhost:8080/ 然后你去修改print js的console(或者添加其他代码) 会发现命令行输出updated. Recompiling... 字样 这就是简单的实现了热更新

最后

本文只是大概从几个demo来对于webpack的基础概念 入口entry 出口 output loader plugins mode(没有直面涉及)几大模块的梳理于实践,让大家对于webpack不在那么陌生!

后续文章会从更深入的角度去学习webpack! 暂定下周1 发表文章(内容详细介绍hot 实现一个简易的vue-cli等等)

demo的代码我会同步github

原文地址：https://segmentfault.com/a/1190000016927436