码迷,mamicode.com
首页 > Web开发 > 详细

前端工程化webpack(一)

时间:2017-11-07 00:20:09      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:imp   资源文件   from   成本   style   export   web   func   pre   

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(一)

标签:imp   资源文件   from   成本   style   export   web   func   pre   

原文地址:http://www.cnblogs.com/96weibin/p/7795624.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!