webpack 从零开始

走在前端的大路上

最后更新日期2017年5月2日

部分引用http://www.jianshu.com/p/42e1...

webpack从零开始

依次执行

mkdir webpack-test //创建文件夹
cd webpack-test //进入文件夹
npm init //初始化
npm install -g webpack //全局安装
npm install --save-dev webpack //安装到你的项目目录

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"//在window的命令行中用双引号。在git bash用单引号

在项目的package.json的“script”对象中添加自定义命令

"scripts":{
    "start":"webpack-dev-server --env development",
    "build":"webpack --env production",
    "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reason"
}

调用命令：npm run build

webpack使用时遇到的问题：

1.Webpack-dev-server不能自动刷新

//版本
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.5"

问题：奇怪想象在使用命令webpack-dev-server时，对内容作了修改也显示编译成功，但是游览器并没有自动刷新手动刷新也不行
解决：之前使用了webpack命令生成了bundle,js文件，然后index.html一直在调用bundle.js对于是相对于index.html存在的真实文件，webpack-dev-server打包的是一个内存文件，他没有去访问者所以才导致的这个情况

<body>
  <div id="example"></div>
  <script src="http://localhost:8080/webpack-dev-server.js"></script>
  <script src="http://localhost:8080/bundle.js"></script>
  //<script src="bundle.js"></script>
</body>

目前在我的电脑（win7）和上述版本的情况下
这两段代码是互斥的

//使用webpack-dev-server自动刷新时，使用如下
  <script src="http://localhost:8080/webpack-dev-server.js"></script>
  <script src="http://localhost:8080/bundle.js"></script>

//使用webpack编译打包时，使用如下
  <script src="./src/bundle.js"></script>

webpack 从零开始

部分引用http://www.jianshu.com/p/42e1...

webpack从零开始

在项目的package.json的“script”对象中添加自定义命令

webpack使用时遇到的问题：

于梦中2010

引用和评论

vscode 推荐扩展

webpack的入门教程

macOS上HBuildX 开发 uni-app项目，运行调试时编辑保存文件不会自动编译更新页面

开发自定义Taro插件解决跨平台难题

是否发生过编辑问题解决与优化

从零开始搭建 TS + webpack-dev-server 的开发环境

Vite如何自定义插件？