关注各种黑科技
B站UP主,编程教学,游戏玩家,挂B,金牛座

webpack2系列视频教程 – 打包

https://webpack.js.org/guides/get-started/   创建一个包 mkdir webpack-demo && cd webpack-demo npm init -y npm install --save-dev webpack /node_modules/.bin/webpack --help mkdir app cd app/ nano index.js
function component () {
  var element = document.createElement('div');
  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');
  return element;
}
document.body.appendChild(component());
cd .. nano  index.html
<html>
  <head>
    <title>webpack 2 demo</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>
  使用webpack打包lodash 使用webpack有如下好处 1 打包的文件只有一个bundle.js,减少了网页的请求 2 如果index.js中引用了lodash, 就会被打包进bundle,如果index.js中不再依赖lodash,再打包bundle会移除引用代码。 3 webpack自动加载import,保证依赖不会出错。网页中引用,如果script标签顺序不对也会出错。 4 自带转换es6的import语法到es5,以支持浏览器。如果要使用更多的es6语法,需要使用webpack的相关插件(transpiler:Bable等)来完成。 npm install --save lodash nano app/index.js
import _ from 'lodash';
nano index.html
<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>
      <script src="dist/bundle.js"></script>
  </body>
</html>
./node_modules/.bin/webpack app/index.js dist/bundle.js webpack --config webpack.config.js ./node_modules/.bin/webpack --config webpack.config.js ./node_modules/.bin/webpack npm run build   参考 https://webpack.js.org/api/cli/ https://webpack.js.org/api/node/ https://webpack.js.org/guides/comparison/ https://babeljs.io/ https://buble.surge.sh/guide/
转载请注明出处
分享到: 更多 (0)

评论 0