前端工程化webpack

Posted 2020-10-13 清汤不加辣

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 要表示 当前路径 要 用 一个   ‘/‘   表示(笔者也是初学 这点 东西试了一晚上。。。然而这个属性并不太重要)