webpack学习笔记

从0开始

1.0、 新建package管理文件 package.json,

cnpm init y

1.1、目录下新建两个文件夹：dist ，src()

dist: 存放入口html文件及webpack生成的js文件
src: 代码源文件

1.2、安装package

//安装webPack
cnpm install -D webpack
//安装webPack-cli
npm i -D webpack-cli
//安装loadsh:
//lodash是一套工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数。
cnpm install loadsh

1.3、简单的第一个webpack代码

• package.json: 查看你安装的三方插件的版本

{
  "name": "webpackDemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "loadsh": "^0.0.4"
  }
}

• index.html: 网页加载入口，将webpack编译出来的main.js嵌入到html中显示出来

    
        
        
        

        

    
    
        
以下显示webpack打包的js内容：
        
    

• webpack.config.js: webpack设置文件，定义入口及输出路径等...

const path = require('path');

module.exports = {
    // entry: './src/index.js',
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname,'dist')
    }
}

• index.js: 我们编写的一个个js文件，后通过webpack打包成main.js作用到html中

import loda from 'loadsh'

function createDomElement() {
    let dom = document.createElement('div');
    dom.innerHTML = loda.join(['aicoder.com','hao',],'');
    return dom;
}

let divDom = createDomElement();
document.body.appendChild(divDom);

• 打包命令

npx webpack

其他插件

• postCss

cnpm i -D postcss-loader
cnpm install autoprefixer --save-dev