返回首页 - Notes - 2017

学习 Webpack


最简单的入门

  1. mkdir hello && cd hello
  2. vim hello.js
    export default function hello() {
      alert(`Hello Webpack`)
    }
    
  3. vim app.js
    import hello from './hello'
    
    hello()
    
  4. vim index.html
    <!DOCTYPE HTML>
    <html lang="zh-CN">
      <head>
        <title>Hello Webpack</title>
      </head>
      <body>
        <script src="bundle.js"></script>
      </body>
    </html>
    
  5. vim webpack.config.js
    module.exports = {
      entry: './app.js',
      output: {
        filename: 'bundle.js'
      }
    }
    
  6. 生成 bundle.jsyarn add webpack && ./node_modules/.bin/webpack
  7. 实时监测文件的改动:yarn add webpack-dev-server && ./node_modules/.bin/webpack-dev-server

常用命令


注意事项

对于用 ES6 写的代码,Webpack 只会自动转换 importexport 语句,其他 ES6 特性的代码并不会自动转换,需要自己附加额外的转换插件


date:2017-03-28