标签: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 要表示 当前路径 要 用 一个 ‘/‘ 表示(笔者也是初学 这点 东西试了一晚上。。。然而这个属性并不太重要)
标签:imp 资源文件 from 成本 style export web func pre
原文地址:http://www.cnblogs.com/96weibin/p/7795624.html