前端webpack搭建

webpack简介

webpack是一个现代的javaScript应用的静态模块打包工具。

前端模块化

1. 前端模块化的一些方案：AMD、CMD、CommonJS、ES6。
2. webpack其中一个核心就是让我们可以进行模块化开发，并且帮助我们处理模块间的依赖关系。
3. 模块不仅仅是javaScript文件，我们的CSS、图片、json文件等在webpack中都可以被当做模块来使用。

打包

打包就是将webpack中的各种资源模块进行打包合并成一个或多个包。

webpack和grunt/gulp的对比

1. grunt/gulp的核心就是Task,所以grunt/gulp被称为前端自动化任务管理工具
2. 如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念，只要进行简单的合并、压缩、就使用grunt\gulp即可，但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。
3. grunt\gulp更加强调的是前端流程的自动化，模块化不是它的核心。
4. webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。

webpack安装

1. 安装webpack首先要安装node.js,node.js自带了软件包管理工具npm
2. 全局安装webpack:npm i webpack -g
3. 局部安装webapck:npm i webpack --save-dev
4. 安装 npm i webpack-cli

准备工作

创建如下文件和文件夹：

1. dist文件夹：用于存放之后打包的文件。
2. src文件夹：用于存放我们的源文件。
3. main.js:项目的入口文件。
4. index.html:浏览器打开展示的首页html。
5. package.json:通过npm init生成的，npm包管理的文件 。

webpack.config.js入口和出口

const path = require('path')
module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
        publicPath: "dist/"
    },
  }

package.json中定义打包

通过执行命令npm run build打包

loader的使用

1.安装style-loader负责将样式添加到DOM中：npm install --save-dev style-loader
安装css-loader负责将css文件进行加载：npm install --save-dev css-loader

• style.css

body {
  background: green;
}

• webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

2.安装sass-loader负责将sass转为css：npm install sass-loader sass webpack --save-dev

• webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          "style-loader",
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
    ],
  },
};

3.安装url-loader：npm install url-loader --save-dev

• webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

4.安装file-loader： npm install file-loader --save-dev

• webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

5.webpack.config.js中配置pulicPath : 'dist/'使url前面加上dist/

  output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
        publicPath: "dist/"
    },

6.图片文件处理-修改文件名称webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name:'img/[name].[hash:8].[ext]'
            },
          },
        ],
      },
    ],
  },
};

ES6语法处理

通过安装babel，将ES6转ES5 : npm i --save-dev babel-loader@7 babel-core babel-preset-es2015

• webpack.config.js

 {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },

vue的使用

1.安装vue : npm i vue --save

• webpack.config.js

module.exports = {
  resolve: {
        alias: {
            "vue$": "vue/dist/vue.esm.js",
        }
    }
}

• main.js

import Vue from "vue"
const app = new Vue({
    el: "#app",
    template: `
     <div>
       <h2>{{msg}}</h2>
       <h2>{{name}}</h2>
     </div>
    `,
    data: {
        msg: 'hello webpack',
        name: "webpack",
    }
})