webpack使用

http://www.css88.com/doc/webpack/     webpack的中文文档

https://www.cnblogs.com/brandonhulala/p/6057378.html

一.安装node

二.安装webpack命令环境

      npm install webpack -g         安装后验证：webpack-version

三.package.json工程文件(npm init)

     进入一个新建的空项目，执行npm init---一路回车

四.安装本地webpack     

     npm install webpack -D 

五.小例子（这里后续会讲用webpack.config.js去配置）

     webpack默认支持commonjs写法

      index:页面。页面只引入bundle.js(编译后的文件)

      entry.js  入口文件，编写咱须要的代码

      终端:webpack entry.js bundle.js  (将入口文件编译到bundle.js）;//这里注意每次修改js文件后都要           编译一次.

      导入其余js文件:在其余文件modele.exports=...... 而后在入口文件var name=requier(url)导入

      导入后再执行webpack entry.js bundle.js

六loader转换器.（后续会讲webpack.config会配置）

      js文件中加载css文件,要下载依赖以下:style-loader和css-loader的依赖

         npm  install css-loader --save     //这里注意--    --save是将下载的依赖名和版本号保存到                       package.json的文件中

         npm install  style-loader --save

        下载后在js中：require(style-loader!css-loader!./style.css);//这里注意要加入转换器（后续会讲webpack.config配置就不须要）

      注意:在webpack中，多个loader加在要用 ！  链接多个loader.

七.webpack.config.js配置（必需要用）

     做用：配置一些webpack须要的入口，出口,rules.....    

module.exports={
    entry:["./entry.js"],//入口文件
    output:{
        filename:"bundle.js"  //出口文件
    },
    devtool:"source-map",////直接生成source-map
    module:{
        //转换器
        rules:[
            //设置全部以.css结尾的
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
             },
            //设置全部.js结尾的Es6转换Es5(还没有结束,还要预设,看下文)
            {
                test:/\.js$/,
                loader:"babel-loader",
                exclude:/node_modules/   //排除哪些目录的js.node——modeles
            }
        ]
    }

};

   //配置后每次修改就不须要webpack entry.js bundle.js.直接执行webpack就能够了

  // 配置Es6转换Es5除了上文的在webpack.config.js中配置babel-loader外,还须要在目录新建一个文件夹,       名称为.babelrc.内容为{'presets':['2015']}

{
  'presets': ['es2015']
}

   //配置了loader之后引入css文件就不须要require(style-loader!css-loader!./style.css).直接                             require("./style.css")

八.webpack命令

    webpack   开发环境下编译(打包)

    webpack -p 生产环境下编译(压缩)

    webpack -w 监听文件改动，自动编译(速度更快).就不用每次执行webpack去编译了

    webpack -d 开启(生成)source maps.用来调试.没有开启的状态下在浏览器的开发者工具只有index和                            bundle压缩后的js.开启后能够看到bundle所加载的全部资源的文件(方便调试)

     注:若是-p -w -d都要开启.直接执行webpack -wdp

九.babel的使用

    首先下载如下：

                npm install babel-loader  --save

                npm install babel-core  --save

                npm install babel-preset-es2015  --save

十.webpack-dev-server用服务器打开

    首先命令安装环境:npm install webpack-dev-server -g     //-g是全局安装

    使用:webpack-dev-server  默认端口号：8080

    修改端口:webpack-dev-server --port 8088  //相似这样修改端口号

    自动刷新浏览器:webpack-dev-server --inline  //改变代码后，自动刷新浏览器

    热重载(局部更改)： webpack-dev-server --hot

    若是要执行多个:webpack-dev-server --inline --hot

  .......................固然也能够在webpack.config.js中设置(推荐)........................

  webpack.config.js中配置后直接运行:webpack-dev-server

module.exports={
    entry:["./entry.js"],//入口文件
    output:{
        filename:"bundle.js"  //出口文件
    },
    devtool:"source-map",////直接生成source-map
    //配置server
    devServer: {
        port:8080,
        inline:true,
    },
    module:{
        //转换器
        rules:[
            //设置全部以.css结尾的
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            },
            //设置全部.js结尾的转换Es6(还没有结束,还要预设)
            {
                test:/\.js$/,
                loader:"babel-loader",
                exclude:/node_modules/   //排除哪些目录的js.node——modeles
            }
        ],
    }

};

       ................. 还有一种打开方式:npm run dev   //那么若是配置呢？以下:................................

 打开package.json文件,有一个scripts的选项,就是你运行的脚本.

  在scripts中增长dev:"webpack-dev-server";//注意这里的对象左边是你运行时候的名字，好比npm         run dev中的dev对应scripts中你的dev。右边表示你执行npm run 一个name的时候实际上执行的命令

 好比:我容许npm run test的结果就是在控制台输出了一个"我是测试"

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  //scripts这里是你运行的脚本
  "scripts": {
    "dev": "webpack-dev-server",
    "test":"echo 我是测试"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "style-loader": "^0.18.2"
  }
}

十一.引入文件时省略文件名后缀和简化路劲(相似变量代替共同的路径头：目录别名)

        配置resolve,以下.

function resolve (dir) {
  return path.join(__dirname, '..', dir);
  //这里path.join是node整合路劲方法，在该方法中，可使用一个或多个字符串值参数，该参数返回将这些字符串值参数结合而成的路径。__dirname是根目录的意思。该方法前两个参数写死，最后一个是路径，路径从根目录开始写。eg:"src/assets"。
//因为该方法属于path模块，使用前须要引入path模块（var path= require(“path”) ）
}


var path= require(“path”) 
....
module.exports={
    entry:["./entry.js"],//入口文件
    output:{
        filename:"bundle.js"  //出口文件
    },
    devtool:"source-map",////直接生成source-map
    devServer: {
        port:8080,
        inline:true,
    },
    module:{
        //转换器
        rules:[
            //设置全部以.css结尾的
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            },
            //设置全部.js结尾的转换Es6(还没有结束,还要预设)
            {
                test:/\.js$/,
                loader:"babel-loader",
                exclude:/node_modules/   //排除哪些目录的js.node——modeles
            }
        ],
    },
    //配置省略文件后缀和简化路径
    resolve:{
      extensions:[" ",".js",".css",".json",".jsx”,".vue"], //省略文件后缀
      alias: {
         '@':resolve("src/assets")   //resolve方法定义在上方,之后引入文件只要引入写法:”@/...其他的路径”。
      }
    }
};

按需加载

动态导入时chunkFilename默认状况是数字，0,1....;当咱们动态引入import("lodash")的时候；若是想要知道打包之后的文件是lodash而不是0.js,只须要在导入的时候加注释：这样打包的时候就会就会将注释中的webpackChunkName的值替换[name],具体详情参考文档：https://webpack.js.org/guides/code-splitting/#dynamic-imports

import(/* webpackPrefetch: true,webpackChunkName: "yourFileName",webpackPreload: true */ 'LoginModal')
import ( /* webpackChunkName: "yourFileName" */ filePath);
import ( /* webpackChunkName: "lodash" */ 'lodash').then(({
        default: _
    }) => {
        console.log(_)
    }).catch(error => 'An error occurred while loading the component');