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（一）
原文地址：http://www.cnblogs.com/96weibin/p/7795624.html