webpac入门

基于node环境,必须确保node已经安装:node-v,npm-v

基础入门

前身:browserify

缺点:只能转化JS

webpack作用:一切都是模块化(js、css图片等),一个模块加载器、打包工具

安装webpack

流程:

 1.安装webpack命令环境

  npm install webpack -g

 验证:

  webpack -- version

 2.package.json 工程文件(需要依赖模块、库描述、版本、作者) 

  npm init

 3.安装本地webpack

  npm install webpack -D

案例:http://www.runoob.com/w3cnote/webpack-tutorial.html

  webpack entry.js bundle.js

webpack加载器

webpack默认只支持JavaScript文件,其他文件需要加载器(loader),loader类似一种转化器。

  css文件:style-loader、css-loader

  下载:npm install style-loader  css-loader -D

注意:多个loader加载,用!进行连接

配置webpack.config.js

作用:配置一些webpack需要的入口、出口、loader

终端执行:webpack

其他:webpack    开发环境下编译打包

    webpack -p   生产环境下编译(打包)

    webpack -w  监听文件改动,自动编译(速度快)

    webpack -d  开启(生成)source map  (显示出未编译的原文件,方便调试)

   webpack -pwd 

官方建议使用webpack.config.js,如果自己定义名字为config.js

  终端执行: webpack --config config.js

ES6:babel转化

  babel使用:npm install babel-loader babel-core babel-preset-es2015 -D

  配置babel预设:

  1.webpack.config.js(不推荐)

    babel:{

      "presets":['2015']

    }

  2.新增一个文件.babelrc,在里面进行配置

转载于:https://www.cnblogs.com/littlewriter/p/7110415.html

<think>好的,我现在需要帮助用户查找关于Webpack配置的方法及参数详解。首先,用户提到了几个引用资料,我需要先看看这些资料的内容,然后结合我的知识来整理答案。 根据引用[1],用户提到了安装webpack的全局和本地命令,以及编译打包应用。引用[2]讨论了在package.json的scripts中配置webpack命令,以及loader的概念。引用[3]详细说明了如何将自定义loader添加到配置文件中,引用[4]则涉及动态导入的Babel插件安装。 用户的问题是关于webpack配置的方法和参数详解,所以我需要覆盖以下几个方面:配置文件的基本结构、入口和出口配置、loader的配置、插件使用、开发和生产环境的配置差异,以及优化相关的参数。 首先,基础配置部分需要提到webpack.config.js,这是默认的配置文件,使用CommonJS模块导出对象。入口(entry)可以是字符串、数组或对象,出口(output)需要指定路径和文件名,可能还需要publicPath。这部分在引用[1]和[2]里都有涉及。 然后是loader的配置,引用[2]和[3]都提到了loader的作用和配置方法。需要解释module.rules数组,每个规则包括test、use和exclude等属性,可能还要提到常见的loader如babel-loader、css-loader和style-loader。 接下来是插件(plugins),比如HtmlWebpackPlugin和CleanWebpackPlugin,这些需要安装并通过require引入,添加到plugins数组中。引用[3]里提到了将自定义loader加入配置,虽然例子是loader,但插件的配置方式类似。 开发和生产环境的配置差异,用户可能需要知道模式设置mode,以及开发工具devtool的配置,比如source map。这部分在引用中没有直接提到,但属于常见配置点,需要补充。 优化配置方面,代码分割可以使用SplitChunksPlugin,这在引用[4]里提到了动态导入的插件安装,可能需要结合说明。另外,性能优化如缓存、压缩等也是重点。 另外,引用[2]提到了在scripts中配置npm命令,比如build和dev,使用不同的webpack参数,这部分需要包含在示例配置中,展示如何通过npm运行不同环境的打包。 需要确保所有代码示例符合用户的要求,使用正确的格式,行内公式用$...$,独立公式用$$...$$,不过这里可能代码块更多。检查LaTeX语法是否正确,但用户的问题可能不涉及数学公式,所以可能不需要。 最后,生成相关问题,可能涉及loader的作用、如何优化打包速度、代码分割的意义,以及处理静态资源的方法。这些问题需要基于配置的不同部分来提出。 总结下来,我需要组织这些信息,确保结构清晰,分点说明每个配置部分,给出示例代码,并正确引用用户提供的资料。同时,保持语言口语化,避免使用Markdown格式,但根据用户要求,回答时需要用指定的格式,所以可能需要调整。</think>### Webpack配置方法及参数详解 Webpack的配置主要通过`webpack.config.js`文件实现,以下是核心配置项及使用说明: --- #### 一、基础配置 1. **入口(entry)** ```javascript module.exports = { entry: './src/index.js', // 单入口 // 多入口示例 entry: { app: './src/app.js', admin: './src/admin.js' } }; ``` - 支持字符串、数组或对象形式[^1]。 2. **出口(output)** ```javascript const path = require('path'); module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js', publicPath: '/assets/' // 静态资源路径 } }; ``` --- #### 二、Loader配置 Loader用于处理非JavaScript文件(如CSS、图片): ```javascript module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] // 从右向左执行 }, { test: /\.(png|jpg)$/, use: ['file-loader'] } ] } }; ``` - `test`:匹配文件类型正则表达式 - `use`:指定使用的loader[^2][^3] --- #### 三、插件(Plugins) 常用插件示例: ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { plugins: [ new CleanWebpackPlugin(), // 清理构建目录 new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; ``` --- #### 四、开发/生产环境配置 1. **模式(mode)** ```javascript module.exports = { mode: 'development', // 或 'production' devtool: 'source-map' // 生成源码映射 }; ``` 2. **开发服务器(devServer)** ```javascript module.exports = { devServer: { static: './dist', hot: true // 热更新 } }; ``` --- #### 五、优化配置 1. **代码分割** ```javascript module.exports = { optimization: { splitChunks: { chunks: 'all', minSize: 20000 // 超过20KB才分割 } } }; ``` 需配合动态导入语法`import()`[^4] 2. **缓存策略** ```javascript module.exports = { output: { filename: '[name].[contenthash].js' } }; ``` --- ### 配置示例 ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.[contenthash].js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ title: 'Webpack Demo' }) ] }; ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值