前端工程化webpack

Posted 清汤不加辣

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端工程化webpack相关的知识,希望对你有一定的参考价值。

webpack 的基本用法  

1.app.js 引入模块

import moduleLog from./module.js‘  //引入moduleLog从./module.js

2.module.js导出模块

export default function(){};      //导出 function(){}

3.打包

$ webpack app.js dist/bundle.js     //打包 入口文件app.js  出口文件 ./dist/bundle.js

  这里要使用 webpack 这个命令要  $ npm i -g webpack

webpack.config.js的最设置

const path = require(‘path‘);  //内置模块  不需要 npm 下载
module.exports = {
  entry : ‘./app.js‘,  //入口
  output : {        //出口
        path : path.join(__dirname,dist),  //用这种方法  路径的 分隔符(用\ 还是 /) 不会出错
        publicPath : ‘./dist‘,     //path 是用来存放打包后的文件的输出目录 
        filename : ‘bundle.js‘    //publicPath 制定资源文件的引用目录  
  },
}

配置完以上的时候  仅需输入  webpack 就可以实现打包  在文件夹中生成实体文件

$ webpack

 

webpack-dev-server热加载    加在module.export 里面        这里开发时要用到 这个模块 要  $ npm i -D webpack-dev-server

devServer : {
  publicPath : ‘dist‘,  //输出 bundle.js 的地方
  port : 3000  //端口号
},

在配置package.json里的 script面添加

dev:‘webpack-dev-server‘

执行        打包后 不生成本地文件  存在内存中

$ npm run dev    //在浏览器中 输入 locallhost:3000进行访问

  当设置了 devServer  里的 publicPath 之后 output 里面就没必要设置 Path 和 publicPaht 了  这时 页面引入的就不是本地文件夹里面的bundle.js了  但是  fillename属性 任然生效      也可以设置  devServer 里面的  publicPath 来改变  生成目录    这里要注意 一点  devServer 里的 publicPath 要表示 当前路径 要 用 一个   ‘/‘   表示(笔者也是初学 这点 东西试了一晚上。。。然而这个属性并不太重要)

 


以上是关于前端工程化webpack的主要内容,如果未能解决你的问题,请参考以下文章

gulp & webpack整合

前端工程化 webpack

webpack系列--浅析webpack的原理

webpack前端工程化构建工具的使用

webpack4 面试题

关于webpack的面试题总结