webpack简单入门

发表于 | 分类于

webpack 简单入门

输出

见到启动 webpack 后输出的信息, 这是啥?

1
2
3
4
5
6
7
8
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./src
ℹ ｢atl｣: Using typescript@3.4.5 from typescript
ℹ ｢atl｣: Using tsconfig.json from /Users/xuheng/qiniu/work/annotation-sys/tsconfig.json
ℹ ｢atl｣: Checking started in a separate process...
ℹ ｢atl｣: Time: 2979ms
ℹ ｢wdm｣: Hash: d3a23643aefb00fc4a9b

其实都是使用依赖的简写, 如 wds 就是webpack-dev-server. atl 就是awesome-typescript-loader, wdm 是webpack-dev-middleware

Hot Module Replacement（HMR), 最方便的方法就使用 wds 咯

  • 在 webpack 配置文件中添加 HMR 插件；
  • 在 Webpack Dev Server 中添加“hot”参数；

postcss

在webpack项目中配置postcss，实现autoprefix

注意点

关于 less-loader, 要装 less 的
webpack error in Cannot find module ‘less’

less-loader

也说了 The less-loader requires less as peerDependency. Thus you are able to control the versions accurately.

参考

深入浅出 Webpack
入门 Webpack，看这篇就够了
Node 的 path.resolve(__dirname，’./src’)