webpackwebpack是基于nodejs实现的，在执行打包压缩的时候是依赖nodejs的。 index.html页

webpack 中文文档：www.webpackjs.com/
webpack是基于nodejs实现的，在执行打包压缩的时候是依赖nodejs的。
Node.js 是前端工程化的重要支柱之一

webpack打包后的web工程，不需要一定在nodejs环境中运行比如在apache中也可以运行

一、基本配置

参考文档：www.jianshu.com/p/537e29f93…
index.html页面导入main.js,，main.js中使用require引入jquery，运行html文件会报错——require没有声明，因为require是在node.js里运行时才有的东西，这时候就需要webpack。
webpack会将import、require等语法解析为es5中浏览器可以兼容的语法，但是它只能解析一些基本的语法，高级的语法需要babel工具

手动配置过程

1、进入指定文件夹，初始化npm

npm init

2、局部安装webpack以及CLI

npm install --save-dev webpack
npm install --save-dev webpack-cli

3、文件结构

main.js中需要jquery，所以首先要本地安装jquery

npm install --save jquery

main.js的内容

var $=require("jquery")

$(function(){
    $("li:odd").css("backgroundColor","cyan")
    $("li:even").css("backgroundColor","gray")
})

4、生成bundle文件

使用命令行指定出口入口

npx webpack src/main.js --output dist/bundle.js

或者使用配置文件webpack.config.js

const path = require('path');

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

npx webpack

5、引入bundle文件

在index.html中引入bundle.js文件

<script src="../dist/bundle.js"></script>

二、webpack-dev-server

安装webpack-dev-server

npm install webpack-dev-server --save-dev

在package.json中添加start代码

  "scripts": {
    ......
    "start": "webpack-dev-server"
  },

在终端中输入如下命令，会打开一个服务器，可以根据提供的端口查看文件

npm run start

webpack-dev-server将打包过后的bundle.js文件存放在内存中，没有存放在磁盘中。这样index.html中引用bundle.js应该从根目录部分引用。

<script src="/bundle.js"></script>

以后不再需要使用 npx webpack 指令

webpack-dev-server的一些参数

1、默认打开端口网页

 "start": "webpack-dev-server --open"

2、修改端口

 "start": "webpack-dev-server --port 3000"

3、修改根路径

 "start": "webpack-dev-server--contentBase src"

4、--hot

--hot参数会使 package.json进行修改并保存后，不会将这个文件再次编译，而是只对修改部分进行修改（增量修改）

这些参数也可以添加在webpack.config.js文件中

devServer:{
    open:true,
    port:3000,
    contentBase:"src",
    hot:true
}
mode:{
    development //模式：开发模式，在这个模式下进行打包
}

三、loader

webpack只能处理js以及json文件，其他文件无法处理，因此要用loader来处理其他文件

css-loader

1、下载css-loader与style-loader

npm install --save-dev css-loader
npm install --save-dev style-loader

2、webpack.config.js中配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

3、入口js文件

在main.js文件中添加

require("./css/style.css")

4、启动

npm run start

less-loader

less的编译方式

less.js

vscode 中的easy less

……

对less的处理参照对css的处理

四、插件

为webpack提供一些额外的功能

HtmlWebpackPlugin

1、安装

npm install --save-dev html-webpack-plugin

2、配置

在webpack.config.js的module.exports中添加

  plugins: [new HtmlWebpackPlugin({
    template:"src/index.html", //以这个文件为模板进行拷贝
    filename:"indexc.html"
  })]

HtmlWebpackPlugin插件通过指定的模板创建出来的文件也是存放在内存中

会自动将内存中打包后的bundle.js加入页面，因此模板中不需要再引入bundle.js

ES6模块化规范

1、export 与 import from

node中使用exports、module.exports进行模块暴露

es6中使用export关键字来进行模块暴露
使用import from 来进行模块的引入

export function foo(){
    console.log("module1")
}

import {foo} from "./modules/module1.js"

运行后会报错，找不到import，这时就需要webpack进行打包

2、分别暴露

export function foo(){
    console.log("module1")
}
export let bar = ()=>{
    console.log("modules1 bar is called")
}
export const MODULE1_ARR = ["A","B"]

利用解构赋值

import {foo,bar,MODULE1_ARR } from "./modules/module1"

foo()
bar()
console.log(MODULE1_ARR)

3、统一暴露

let bar = ()=>{
    console.log("modules1 bar is called")
}
let bar2 = ()=>{
    console.log("modules1 bar2 is called")
}
let bar3 = ()=>{
    console.log("modules1 bar3 is called")
}
export(bar,bar2)

4、默认暴露

export default {
    msg:"module3中的msg",
    foo(){
        console.log("module3 foo is called")
    },
    bar(){
        console.log("module3 bar is called")
    }
}

这时候不需要解构

import module3 from "./modules/module3"

module3.foo()
module3.bar()
console.log(module3.msg)