webpack入门（1）

1. 什么是webpack

• webpack is a module bundler.(模块打包工具)
• webpack 可以看做是模块打包机，它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss,Ts等），并将其打包为合适的格式以共浏览器使用

2. 安装

• 环境： nodejs nodejs.org/en/
• 全局（不推荐使用全局）

    npm install webpack webpack-cli -g
    // webpack-cli 可以帮助我们在命令行里使用npx,webpack等相关命令
    
    webpack -v  //检查版本
    
    npm uninstall webpack webpack-cli -g  //全局卸载

• 局部安转（项目内安装）

    npm install webpack webpack-cli --save-dev // -D

• 安装指定版本

  npm info webpack //查看webpack 的历史发布信息
  
  npm install webpack@x.xx webpack-cli -D

• 检查安装是否成功

 webpack -v  //command not found  默认在全局环境下查找
 
 npx webpack -v //npx帮助我们在项目中的node_modules里查找webpack
 
 ./node_modules/.bin/webpack -v //到当前的node_modules模块里指定webpack

3. webpack 配置

• webpack 是有默认配置的 俗称零配置，零配置是很弱的，特定的需求，总是要进行特定的配置

 module.exports = {
     entry: "./src./index.js", // 默认的入口文件
     output: "./dist/main.js"// 默认的输出
 }

• 当我们使用npx webpack,表示的是使用webpack处理打包，./src/index.js的入口模块。默认放在当前目录下的dist目录，打包后的模块名称是main.js，当然我们也可以修改
• webpack有默认的配置文件，叫做webpack.config.js,我们可以对这个文件进行修改，进行个性化配置
• 默认的配置文件：webpack.config.js

 npx webpack //执行命令后，webpack会找到默认的配置⽂文件，并使⽤用执⾏

• 不使⽤用默认的配置⽂文件: webpackconfig.js

 npx webpack --config webpackconfig.js //指定webpack使用
 webpackconfig.js文件来作为配置文件并执行

• 修改package.json script字段：有过vue react 开发经验的同学 习惯使用 npm run 来启动，我们也可以修改下，原理就是模块局部安装会在node_modules/.bin目录下创建一个软连接

 "scripts": {
     "bundle": "webpack"
 }
 npm run bundle

4. webpack.config.js 结构

 module.exports = {
     entry: "./src/index.js",//打包入口文件
     output: "./dist", //输入结构
     mode: "production", //打包环境  production ,development
     module: {
         rules: [
             // loader模块处理
             {
                 test: /\.css$/,
                 use: "style-loader"
             }
         ]
     },
     plugins: [new HtmlWebpackPlugin()] //插件配置
     
 }

5. 项目结构优化

  dist
  // 打包后的资源目录
  node_modules
  //第三方模块
  src
  //源代码
    css
    images
    index.js
    
   package.json
   webpack.config.js