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