webpack 什么是webpack？WebPack入门学习 CommosJs Webpack安装使用

webpack

一、什么是webpack？

• WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

二、模块的引入

<scriprt src=“model1.js"></script>
<scriprt src=“model2.js"></script>
<scriprt src=“model3.js"></script>

• 这是最原始的Js文件加载方式，如果将每个js文件看作一个模块，那么他们的结构通常暴露在全局的作用域下，也就是window对象中。不同模块都调用一个作用域!
• 以上有多弊端
  • 全局作用下容易造成变量从冲突
  • 文件只能按照的顺序加载…

CommosJs

• node.js遵循CommonsJs规范，该规范的核心思想就是允许模块通过require方法来同步加载依赖的其他模块，然后通过exports导出需要暴露的接口
• 优点
  • 服务器端便于利用
  • 简单利用
• 缺点
  • 同步的模块不适合在浏览器环境
  • 不能非阻塞并行加载多个模块。

三、Webpack安装使用

将ES6的代码打包编译成ES5! 能将各种资源如 JS\jsx\ES6\SASS\LESS，土拍你等作为模块处理和作用

1. 安装

npm install webpack -g
npm install webpack-cli -g

• 测试是否安装完成
  

2. 配置

• 创建webpack.config.js
• entry:入口文件，指定Webpack用哪个文件项目的入口
• output:输出，指定WebPack吧处理完成的文件放置到指定目录
• modle: 模块，用于处理各种类型文件
• plugins:插件…
• resolve:设置路径执行
• watch:监听，用于设置文件改动后直接打包

module.exports = {
  context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          }

3. 了解webpack案例

1. 创建项目
2. 创建module目录
   

• hello.js

//导出对外一个方法
exports.sayHi = function () {
  document.write("<h1>初探Webpack</h1>");
}

• main.js

//导入对象
var hell = require("./hello");
hell.sayHi();

• 重点:配置webpack
  • 创建webpack.config.js文件

module.exports = {
    entry:'./module/main.js', //入口
    output:{ //打包完后添加文件
        filename :'./js/bundle.js'
    }
}

• 通过webpack打包:根据配置文件中配置生成bundle.js文件

  • 生成的文件，会被进行压缩并且转换为ES5语法，从而适配大多浏览器
    

• index.html引入

//引入打包后的文件
<script src="dist/js/bundle.js"></script>