wepack使用

当前使用的版本：webpack 4.5。

⚠️webpack 是需要有 node 环境的，所以在使用之前需要保证你当前安装的有 node。

安装 webpack：

npm install webpack --save-dev  （dev 是指的是在开发环境中使用的依赖包）

一、入门的 webpack 配置 webpack.config.js：

module.exports = {
    entry:  __dirname + "/app/main.js", //压缩入口
    output: {
      path: __dirname + "/public", //打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
    },
  }

⚠️需要注意的是：

1、__dirname 是 node 的全局变量，存储的是文件所在的目录

2、output 中的 path 是文件打包后的绝对路径，不是相对路径

3、执行命令的时候，如果 webpack 不是全局安装的，需要加上路径： node_models/.bin/webpack

　　直接执行，如果用的是 webpack 4，则会有一个提示说需要单独安装 webpack-cli。

　　因为在webpcak 3 中 webpack-cli 是集中在 webpack 中的，而在 webpack 4 为了方便管理维护，将 webpack-cli 分离了出来；所以在如果最初没有安装 webpack-cli 的时候，执行 webpack 命令会有提示说让用户安装 webpack-cli。

4、还有一种执行方法是 webpack  入口文件路径  打包后输出的文件路径

二、快捷执行打包任务：

package.json 添加如下内容：

"script" : {
    "start": 'webpack' //无论是不是全局安装的webpack，都可以不用写 node_module/.bin/ 这个路径，npm 能自己找到
}

然后就可以使用 npm start 来代替上面的 node_module/.bin/webpack 这个繁琐的命令了

⚠️start （test也是）是个特殊的命令，通过 npm start 就可以找到对应的命令进行执行，如果不是 start 命令则需要使用：npm run scriptName

"scripts": {
    "error": "echo \"Error: no test specified\" && exit 1"
}

test 命令需要这样执行： npm run error

他的执行结果就是输出一个错误：

三、source maps的设置，devtool选项

1、source-map 单独文件生成，功能完整，但是打包速度过慢

2、cheap-module-source-map 单独文件生成，不带映射，只能对应行，不能对应列，不便调试

3、eval-source-map 在同一个文件中生成干净完整的source-map，但是有完全问题；开发阶段首选

4、cheap-module-eval-source-map 速度最快，没有映射，缺点同3

使用，在wapack的配置中添加 devtool 即可：

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}　

四、浏览器监听代码修改，并自动刷新---webpack服务器：webpack-dev-server

安装该插件：npm install webpack-dev-server --save-dev

devServer 配置：

1、contentBase：服务器从哪里获取内容。默认为根目录，如果是其他目录的话，进行修改即可，建议使用绝对路径；可以从多个目录获取，用数组即可

2、port：监听哪个端口的请求，默认为 8080

3、inline：为 true 时则会进行热替换

4、historyApiFallback：使用 HTML5 History Api 时使用，如果设置为 true 则表示不跳转

使用：

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: path.join(__dirname, "public"),//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }
}

同时需要在 package.json 的 scripts 对象中添加

"scripts": {
    "server": "webpack-dev-server --open"
  }

执行 npm run server 命令就可以看到效果，这时修改文件，页面内容实时更新则说明配置成功

五：Loader

1、用于对模块的源代码进行转换

2、可以使你在 import 或"加载"模块时预处理文件

3、可以将文件从不同的语言（如 TypeScript）转换为 JavaScript

4、将内联图像转换为 data URL

5、他甚至允许你直接在 JavaScript 模块中 import CSS文件

如果要使用 loader 则需要安装对应的 loader

npm install css-loader --save-dev    告诉 webpack 加载 css

npm install js-loader --save-dev    将 TypeScript 转化成 js

然后在 webpack.config.js 中配置 module 对象

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }, // 给每个 css 文件使用 css-loader
      { test: /\.ts$/, use: 'ts-loader' } // 给每个 ts 文件使用 ts-loader
    ]
  }
};