webpack怎么安装和配置?-阿里云开发者社区

开发者社区> 开发与运维> 正文

webpack怎么安装和配置?

简介: 先全局安装 : npm i webpack webpack-cli -g 在工作文件夹 初始化 npm init -y 会出现一个package.json文件 在工作文件夹 根目录新建一个配置文件 ,js格式 webpack.

先全局安装 :

npm i webpack webpack-cli -g

在工作文件夹 初始化

npm init -y

会出现一个package.json文件

目录结构.png

在工作文件夹 根目录新建一个配置文件 ,js格式

webpack.config.js

在配置文件写

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');  //自动引入插件
module.exports = {
mode:"development", //开发环境
//入口
entry:path.join(__dirname,'./src/main.js'),
 /*出口*/
    output:{
        path:path.join(__dirname,'./dist'),
        filename:"bundle.js"
    },
/*插件 是一 数组 里面的插件都是构造函数 需要 */
    plugins:[
        new HtmlWebpackPlugin({
            template: path.join(__dirname,'./src/index.html'),
            filename: "index.html"
        })
    ],
//配置模块
/**************************************************
    *模块,把其他文件格式的文件 转化成模块,需要相应的loader
     * 不同的文件 需要不同的 loader
     * css-loader 将css文件转为 模块
     * style-loader 将css模块插入网页文档中
     * loader执行顺序是从右往左
    * *************************************************/
module:{
rules:[
        {test:/\.css$/,use['style-loader','css-loader']},
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
//配置图片支持
       {test:/\.(png|jpg|gif|webp|jpeg)$/,
                use:[{
                   loader:"url-loader",
                    options: {
                        limit: 1024,  
                      //图片小于 1K 才转best64
                        // name:'[path][name]-[hash:5].[ext]'
                        name:'[name].[ext]'
                    },
//配置ES6转ES5
        {test:/\.js$/,use:['babel-loader'],exclude:[/node_modules/,/dist/]}

  ]
 }
}

下载 插件 和 模块 集合

npm i html-webpack-plugin -D
npm install sytyle-loader css-loader -D //css支持模块
npm install less less-loader -D //less支持模块
npm install url-loader file-loader -D //图片支持模块

模块需要在配置文件webpack.config.js配置 具体在上面

图片模块loader会把图片转为best64的 ,如果图片很多很大,会很消耗内存 .所以在上面会有一个限制 limit :1024 ,

兼容性处理

配置ES6转ES5

npm install babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D

还有再配置一个文件 .babelrc

{
  "presets": ["env","stage-0"],
  "plugins": ["transform-runtime"]
}

我们要怎么使用 呢?

热更新需要下载一个插件

npm install webpack-dev-server -D

现在在回去看看package.json文件配置下

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --port 8888 --hot --open "
  },

目录结构和启动配置.png

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章