webpack快速建立demo

一. webpack

1. 静态模块打包器
2. 解析js,json,jsx,react,css语法
3. loader可以将所有类型的文件转换为webpack能处理的模块，默认处理js的依赖关系
   4.依赖loader可以打包字体文件，图片等静态文件为一个js文件——bundle

二.建立项目结构

1. 新建文件夹，并在文件夹下建立package.json文件。
   npm init初始化建立package.json文件
2. 本地安装webpack
   npm i -D webpack(安装版本在4.0以后需要另安装webpack-cli)
   npm i -D webpack-cli(用于在命令行中运行webpack)
3. 项目结构
   webpack{
   package.json, (定义项目所需的模块，以及文件配置信息)
   dist {index.html}, (最终的文件输出)
   src {index.js}
   }

三.安装lodash及编写js

1. 安装lodash
   npm i lodash -P
npm install --save lodash
2. index.js文件

import _ from 'lodash'  //es6引入lodash default变量
function createDomElement(){
    let dom = document.createElement("div");
    dom.innerHTML = _.join(["a","b","c"],"");
    dom.classList.add("box");
    return dom;
}

document.body.appendChild(createDomElement());

3. webpack.config.js文件（默认配置文件名，可以修改）
   在package.json文件的scripts
   build:npx webpack -c webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',//指定入口文件
  mode: 'development',//指定开发模式
  output: {  //通知webpack在哪里输出它创建的bundle,以及文件名
      filename: 'main.js',
      path: path.resolve(__dirname,'dist')   //reslove将绝对路径转化成相对路径
  },
    module: {
        rules: [
            {   test: /\.(sc|c|sa)ss$/,
                use: ['style-loader','css-loader','sass-loader']
            }
        ]
    }
};

4. 执行npx webpack（执行node_modules下的bin目录下的二进制文件），执行完成后生成main.js，在index.js中引用文件。

package.json

1. 指定项目名称，项目版本（必须的，否则无法install）
2. scripts指定了运行脚本npm命令行的缩写
3. dependences(项目运行依赖的模块),devdependence(项目开发依赖的模块)
4. engines指定node的版本（npm）
5. 在你的package.json中提供一个bin字段,是一个命令名和本地文件名的映射。在安装时，如果是全局安装，npm将会使用符号链接把这些文件链接到prefix/bin，如果是本地安装，会链接到./node_modules/.bin/
   { "bin" : { "myapp" : "./cli.js" } }

lodash

lodash的所有函数都不会在原有的数据上进行操作，而是复制出一个新的数据而不改变原有数据。
内部封装了很多字符串、数组、对象等常见数据类型的处理函数
https://www.lodashjs.com/