Webpack入门教程(转)

今天上午看到一篇非常棒的webpack入门教程,原文链接:
https://segmentfault.com/a/1190000006178770#articleHeader4

  1. 使用npm init命令创建package.json文件
  2. 安装webpack: npm install --save-dev webpack
  3. 创建两个js文件:main.js Greeter.js 其中main.js 依赖Greeter.js。
    我们的目的就是把这两个js文件用webpack打包成一个js文件。
  4. 使用命令webpack main.js bundle.js,其中main.js是入口文件,bundle.js是打包后的文件。

上面的命令稍微有点‘复杂’,但是我们可以通过配置文件来打包。

  1. 首先创建一个webpack.config.js文件,文件内容如下:
module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

其中的entry就是我们上面步骤4的main.js(也就是入口文件),output用于指定打包后的那个js文件的路径和名字。

  1. 使用命令 webpack就能生成bundle.js了。

另外,还可以修改node的配置文件来执行打包:

//package.json
"scripts": {
     "start":"webpack"
  },

OK,现在使用命令npm start就能成功打包js文件了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容