webpack 安装,打包使用

 

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

全局安装webpack
　　打开文件夹amd输入指令
　　　 npm i webpack -g   这里i是 install 简写 后面都是用 i 表示
　　 　npm i webpack-cli -g  全局安装
　　 　webpack -v    查询webpack版本

一.打包js多个文件

在自己的文件夹(这个文件夹是你要打包的文件夹,我的因为是一个测试的文件夹,demo1,所以我在demo1里面按住shift点击鼠标右键,在此次打开命令窗口)打开命令:

　　1. npm init   这个是初始化package.json  自动将package.json中的模块安装到node-modules文件夹下 ,初始化后一直回车 ,一直回车, 回到显示你的文件夹后在下一步

　　2. 回到文件夹demo1下创建一个main1.js 和 main1.js ,在创建一个webpack.config.js 一定要这样的格式名字

　　3. 然后在你创建的这个webpack.config.js文件夹里面加载node的原有模块

　　4. const path = require('path'); //加载node原有模块path  paths是用来对一些路径配置

　　

　　  一. entry: 用来写入口文件，它将是整个依赖关系的根 当我们需要多个入口文件的时候，可以把entry写成一个对象我建议使用后面一种方法，因为他的规模会随你的项目增大而变得繁琐

　　 二.output: 即使入口文件有多个，但是只有一个输出配置 如果你定义的入口文件有多个，那么我们需要使用占位符来确保输出文件的唯一性

　　

//加载nide原有模块path  path是对一些路径配置的
const path = require('path');

//导出webpack的配置 ,
module.exports = {
    entry:{

　　　　　　main1 : './main1.js',
　　　　　　main2 : './main2.js'

},//配置入口main.js作为打包入口
    output:{
        //配置输出路径 , 输出到当前目录的dist文件夹 , 现在没有文件夹,他会自己帮你创建
        path:path.resolve(__dirname,'dist'), //把dirname当前目录 ,dirname前面是两个下划线
       filename:'bundle-[name]-[hash].js' //包的名称 ,自己定义名称,打包的名字就是你自己定义的这个 ,name是一个变量,就是你自定义名称加上你要打包的js文件名字,hash是版本号
    },

    mode : 'development' //配置环境 : 开发环境和生产环境
}
　　//执行命令在命令器里输入指令webpack ,让他生成打包文件 

一.打包css多个文件

　　1. npm init

　　　　2.创建app1.css

　　　　　　app2.css 

　　　　　　在创建min.js 

　　　　　　还有webpack.config.js 　　下面代码　　　　　　　　

const path = require('path');//加载nide原有模块path  path是对一些路径配置的

module.exports = {  //导出webpack的配置 ,
    entry: {
            //配置入口main.js作为打包入口
            main :'./main.js',

            },
    output:{
        //配置输出路径 , 输出到当前目录的dist文件夹 , 现在没有文件夹,他会自己帮你创建
        path : path.resolve(__dirname,'dist'),//把dirname当前目录 ,dirname前面是两个下划线
        filename : 'bundle.js' //包的名称 ,自己定义名称,打包的名字就是你自己定义的这个 ,name是一个变量,就是你自定义名称加上你要打包的js文件名字,hash是版本号
    },
    //配置模块
    module :{
        //配置解析规则 ,什么什么文件对应什么loaders
        rules :[
            //配置不同的loaders
            {  //配置css
                test : /\.css$/,     //设置以.css结尾的文件
                use:['style-loader','css-loader']      //这个固定格式

            }
        ]
    },
}

　　　　3.另外配置css还得下载loaders 和css-loader 

　　　　　　指令:　　npm i style-loader --save-dev

　　　　　　　　　　npm i css-loader --save-dev

　　　　　　下载完后执行webpack指令进行打包

　　

三. 打包less文件

　　　　1.创建less文件

　　　　　  2 .配置less入口文件的loader

　　　　　  3.在mian.js 引用模块   webpack.less是我less文件名字

　　　　　 4. 配置完入口就要安装less和less-loader    安装完成 执行打包webpack  然后创建一个html引入js文件 测试有效果没

四 . 配置打包图片和url-loader

　　　　老样子 , 准备工作 图片.mian文件的引用 ,webpackgonfig的配置

　　　　 图片

　　　　　　2 配置url-loader 

　　　　　　3 . main.js引用模块 或者说引用图片

　　　　　　4 .在cmd里面安装url-loader   然后打包webpack

　五.配置压缩文件和html文件

　　1.在wbepackconfig头部添加插件

　　　2.在module后面添加以下代码:

　　　3.安装htmlWebpackPlugin和uglifyjsWebpackPlugin插件,同时还需要局部安装webpack 运行打包命令 webpack,打开dist里面的index.html和index.js检查配置是否成功

　　　六.配置dev-server

　　　　

1. 在webpack配置文件加上
2. 安装webpack-dev-server 和webpack-cli
3. 在package.json的scripts里面加上下面这一句  ,这样我们就能直接通过npm run dev 快捷让他自动打开网页显示内容

　　

　　　七　配置热模块替换(热更新) {实时更新内容,修改一下代码网页就给刷新}

　　　　1.在wbapckconfig文件配置

　　　　　　2.在devServer加上

　　　　　　3. 在plugins里加上  运行npm run dev检查控制台是否有打印以下信息[WDS] Hot Module Replacement enabled.有的话就成功

八.配置webpack跨域

　　　看图片添加 　

　　　　然后就可以拿数据啦 , 去main.js里面用jq的ajax方法拿数据

　　　　这样是拿不到的 , 因为你用的jq方法 , 所以我们要安装jq        安装jq 然后引用模块,出去页面看是否打印数据