webpack的简单使用

webpack原本是用来打包js文件的，只认js，有了loader后，他就开了二郎神天眼，也认识css等文件。现在他又有了 plugins，他就有了金箍棒，使得在打包的同时可以压缩、编译ES6，可以干更多的事情

第一步：cnpm安装

mkdir webpack-demo && cd webpack-demo
cnpm init -y
cnpm install webpack webpack-cli --save-dev

第二步：创建目录结构如下，其中dist和src目录需要手动创建

  webpack-demo
  |- package.json
  |- /dist
    |- index.html
  |- /src
    |- index.js

index.html和index.js内容如下：

<!doctype html>
<html>
  <head>
      <meta charset="utf-8" />
    <title>测试</title>
    <script src="./bundle.js"></script>
  </head>
  <body>
    <script></script>
  </body>
</html>

import $ from 'jquery';

$(document).ready(function(){

    console.log("哈哈")

})

第三步：

执行：cnpm isntall jquery

在webpack-demo下新建webpack配置文件：webpack.config.js

webpack.config.js

const path = require('path'); //引入依赖
const uglify = require('uglifyjs-webpack-plugin');  //引入依赖

module.exports = {
  entry: './src/index.js',  //你要打包文件的开头，如果这个文件还引入其他文件，则也会被识别打包
  output: {
    filename: 'bundle.js', //生成打包后的文件的名字
    path: path.resolve(__dirname, 'dist')  //生成的打包后的文件你想把它放的地方
  },
  plugins: [ //这是金箍棒
    new uglify()  //压缩
  ]
};

运行：

npx webpack --config webpack.config.js后，在dist得到打包完的文件：