02-webpack的基本配置和输入webpack实现自动打包-CFANZ编程社区

1安装webPack的方式
    01==》    第一次全局安装  npm i webpack -g  第一次安装了之后以后就不需要在安装了
        查看webpack的版本,  webpack -V    我的版本是3.8.1
        如果出现对应的版本， 你就不需要再次执行 npm i webpack -g
        说明你已经安装过webpack了；

02==》 创建一个文件夹；如testwebpack
        在项目根录下(testwebpack)运行 npm i webpack --save-dev 安装到项目依赖中去 

        会出现两个文件夹；node_modules  package.json这个两个文件夹

如果没有

2尝试使用webpack

         安装包描述文件  npm init -y  新版本的node会自带这个的;
         
         npm i jquery -S 安装jq 保存到依赖列表中去了；
         此时你就可以在package.json 看见自己已经安装了jquery了

》新建src目录在src目录下新建index.html文件在src目录下新建main.js文件

src目录下创建 imgs文件夹 和js文件夹（文件结构不要错了）

       

         在main.js文件中导入jq   导入的语法是  import **  from    **它是es6中导入模块的方式 
            1 如 import $ from  'jquery'   注意大小写
             从引入文件可以知道 首先是在自己的兄弟目录中去找  
             然后去父级目录的兄弟目录中去找  然后依次类推（重点）

import $ from "jquery";

function(){
                console.log("haha")
             })
             在node.js中 你要是这样写的 const $=require("Jquery")
         

             由于es6的import导包的方式台高级了 所以浏览器解析不了 所以import $ from 'Jquery'汇报错
             所以需要webpack来惊醒转化

运行webpack。
webpack ./src/mian.js  ./dist/testindex.js 在dist中被编译的文件是为testindex.js

此时你就会发现，项目目录下多了一个dist文件夹；和文件夹下有个文件；

注意：如果如果你配置了webpack.config.js,再次运行上面的命令；会报错

配置webpack和命令运行；

3在项目的跟目录下创建webpack.config.js文件配置如下;

const path = require("path");

module.exports={
        entry:path.join(__dirname,'./src/main.js'),  //入口文件 使用webpack要打包哪一个文件
            output:{ //输出相关的配置
                path:path.join(__dirname,'./dist'), //指定打包好的文件会输出到哪一个目录（dist)下去
                filename:"testindex.js" //指定打包好的文件的名称叫什么名字
             }
   }


  3所以在index中的时候我们就引入被webpack编译好的js文件就可以了
  <script src="../dist/testindex.js"></script>
  这里引入的时候需要注意的点是：
  之所以是testindex.js是因为配置写的编译成testindex.js

如果你已经向上面这样配置了可以直接在项目的根目录下webpack就可以运行了

因为已经配置好了

webpack 能够处理的问题
ebpack能够处理js文件之间的互相依赖关系
webpack能够处理js的兼容性问题   能装将es6的语法转化为es5的语法

我们可以发现引入jquery的两种方式

const $=require("Jquery")

import $ from  'jquery'

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：晚来南风晚相识

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接

如果文中有什么错误，欢迎指出。以免更多的人被误导。