webpack初学（一）

webapk初学的配置

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
在这里我简单的介绍一些webpack的配置项
1、安装webpack

 yarn init-y     // 初始化package,jsonyarn add webpack webpack-cli -D       //webpack-cli  命令行工具

安装完成

2、使用webpack 打包

直接使用webpack

 npx webpack --help  // 查看webpack的帮助npx webpack --entry ./src/app.js --output ./dist/boundle.js --mode 'development'   //在全局没有安装的情况下，使用npx  --mode 确定生产环境或开发环境

配置文件 webpack.config.dev.js (创建文件与src 同级)

const path = require('path')
// 添加插件
// 拷贝html 文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//拷贝 一些 .ico 文件 或者其他文件
const CopyWebpackPlugin = require('copy-webpack-plugin')
//删除文件夹 dist 打包的时候重新创建
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//加载包 vue-loader  vue-loader/lib/plugin  vue-template-compiler  用来解析.vue文件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//用于抽离css代码，将代码抽离到一个文件里边
const MiniCssExtractPlugin = require('mini-css-extract-plugin')//定义一个常量 提取出来，loader 添加使用use的方法
const loaderUse = (firstLoader) => {return [{loader: MiniCssExtractPlugin.loader,options: {//css 文件打包到的路径publicPath: path.resolve(__dirname, '../dist/styles/'),hmr: process.env.NODE_ENV === 'development'},},'css-loader',//postcss{loader: 'postcss-loader',options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-preset-env')(),require('cssnano')(),require('autoprefixer')]}},firstLoader,]
}module.exports = {// 定义模式mode: 'development',// 定义入口entry: {app: path.resolve(__dirname, '../src/app.js')},// 定义出口output: {path: path.resolve(__dirname, '../dist'),filename: 'scripts/[name].js'  // 文件名},//添加vue-loader来解析.vue 文件module: {rules: [{test: /\.vue$/,loader: 'vue-loader'},//可以使用sass  less css 等// {//     test: /\.scss$/,//     loaders: ['style-loader','css-loader','scss-loader']   //loader 执行顺序从后往前执行// },// {//     test: /\.(css|styl)$/,//     loaders: ['style-loader','css-loader','stylus-loader']   //loader 执行顺序从后往前执行// }{test: /\.(css|styl)$/,use: loaderUse('stylus-loader'),},{test: /\.scss$/,use: loaderUse('sass-loader')},]},// 添加插件plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: path.resolve(__dirname, '../public/index.html')}),// 里边的参数以数组的形式 ，数组里边有对象new CopyWebpackPlugin([{from: path.resolve(__dirname, '../public/favicon.ico'),to: path.resolve(__dirname, '../dist/')}// ......]),new VueLoaderPlugin(),new CleanWebpackPlugin(),new MiniCssExtractPlugin({//将css 代码抽离的时候创建styles文件夹filename: 'styles/[name].css'}),],//添加serverdevServer: {contentBase: '../dist',host: 'localhost',port: 9999,open: true     //需要自动打开浏览器是设置}
}

实现打包需在 package.json 里边配置

 "scripts": {"start": "yarn dev","build": "webpack --config ./config/webpack.config.dev.js","dev": "webpack-dev-server --config ./config/webpack.config.dev.js"},

启动

 yarn dev | yarn start  //启动serveryarn build   //实现打包

总结一下

Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
Module（模块）：在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk（代码块）：一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader（模块转换器）：用于把模块原内容按照需求转换成新内容。
Plugin（扩展插件）：在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件，并改变输出结果

autoprefixer使用

在webpack.config.dev.js文件同级目录中，新建postcss.config.js文件，并且添加如下代码

 module.exports = {plugins:[require('autoprefixer')]
}

现阶段就介绍到这里，后续还会进一步的学习webpack。

webpack初学（一）相关推荐

webpack初学笔记之小案例篇demo1
接上一篇: 在webpack-test1文件夹下边创建一个文件hello.js 然后在命令行敲下代码 webpack hello.js hello.bundle.js 先输入需要打包的文件名称然后是 ...
Webpack是什么?(webpack初学简单易理解)
Webpack5实战教程 1. 什么是webpack? 简介 2. 学习webpack使用的环境参数 node.js安装 webpack安装 3. 学习webpack的必备技能 4. 为什么使用web ...
webpack 打包（初学打包运行）
第一步: 1. 新建一个文件夹, 2. 点击进入该文件夹, 3. 点击搜索输入 cmd +回车(Enter)打开命令提示符 4.进入到当前文件夹的 CMD 指令第二步: 1.输入 npm in ...
初学webpack(第一篇)
作者:房姗链接:https://zhuanlan.zhihu.com/p/24447447 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. webpack是一款很火 ...
webpack 打包流程（初学）
1)安装webpack-cli npm install webpack-cli -g webpack -v 安装成功,查看版本号 2)新建webpack.config.js文件 module.expo ...
java web开发初学_2018年学习Web开发的绝对初学者指南
java web开发初学 This post was originally published on Coder-Coder.com. 该帖子最初发布在Coder-Coder.com上 . If yo ...
vuejs和webpack项目（VueComponent）初尝试——瀑布流组件
碎碎念: 好久不见,最近自己有些懈怠没更过多少博,主要原因之一是对自己学习方式的一些思考,翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验 ...
创建 Npm+webpack
准备工作 1. 借助Node.js环境里的npm来安装: 下载node并进行安装:https://nodejs.org/zh-cn/ 2. 设置好npm镜像: 使用淘宝镜像:npm install ...
简单地使用webpack进行打包，一些常见打包错误
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependenc ...

webpack初学（一）

webapk初学的配置

webpack初学（一）相关推荐

最新文章

热门文章