摘要:前言在上一篇文章中我介绍了学习前的准备工作,下面开始的学习。目标一般我们接触到的关于的文章,都是以解读官方文档为主,而且是针对单页面项目的应用。我先在假设要做一个多页面应用,该如何去通过打包。
前言
在上一篇文章中我介绍了学习webpack前的准备工作,下面开始webpack的学习。
*创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpack-demo *初始化一份package.json $ npm init -y *package.json内容 { "name": "webpack-demo",//项目文件夹名字 "version": "1.0.0",//项目版本号 "description": "",//项目的简介 "main": "index.js", "scripts": {//可以通过npm执行的命令 npm run test "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "",//作者 "license": "ISC" }
请关注package.json的内容在之后的学习中的变化。
目标一般我们接触到的关于webpack的文章,都是以解读webpack官方文档为主,而且是针对单页面项目的应用。我先在假设要做一个多页面应用,该如何去通过webpack打包js、css。
假设js编写采用的是es6语法,样式采用scss,图标采用iconfont和小图片,页面假设是html(实际可能是php或者jsp等)
打包思路,在src目录下面创建dist文件夹,我们会根据不同页面功能打包成独立文件夹,其中包含对应的js和css
如下图
多页面应用js打包webpack安装
$ npm install webpack --save-dev
# package.json中会出现下面属性 "devDependencies": { "webpack": "^3.2.0" }
babel安装 (因为我们采用的是es6语法,所以需要通过babel来把代码转换成es5代码,从而在现有环境中执行。)
$ npm install babel-loader --save-dev
$ npm install babel-core babel-preset-es2015 --save-dev
创建.babelrc文件并添加代码 { "presets": ["es2015"] }
*在webpack.config.js中添加babel-loaders module: { loaders: [ { test: /.js/, loader: "babel", include: __dirname + "/src", } ], }
package.json
{ "name": "webpack-demo", "version": "1.0.0", "description": "my first webpack demo", "scripts": { "dev": "webpack" }, "author": "sun", "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-es2015": "^6.24.1", "webpack": "^3.2.0" }, "repository": { "type": "git", "url": "https://github.com/xxxxxx(你的git名)/webpack-demo.git" } }
webpack.config.js
const path = require("path") const webpack = require("webpack") //to access built-in plugins const fs = require("fs") function getEntry() { var jsPath = path.resolve(__dirname, "src/js/app") var dirs = fs.readdirSync(jsPath) var matchs = [], files = {} dirs.forEach(function (item) { matchs = item.match(/(.+).js$/); if (matchs) { files[matchs[1]] = path.resolve(__dirname, "src/js/app", item) } }) return files } module.exports = { entry: getEntry(), output: { path: path.join(__dirname, "src/dist"), //文件输出目录 publicPath: "src/dist", //用于配置文件发布路径,如CDN或本地服务器 filename: "[name]/[name].js", //根据入口文件输出的对应多个文件名 }, module: { loaders: [ { test: /.js/, loader: "babel-loader", include: __dirname + "/src/js" //include设置只转码src/js下的js文件,不希望被转码的第三方js库可以放在该目录外 } ] } }
下面我们开始打包js代码
$ npm run dev - 执行后src/js/app下面的所有js会被分别打包到/src/js/dist下面,并且保持文件名不变,你会发现此时打包后的js不是压缩后的代码,如果需要压缩代码,需要在webpack.config.js中加入: plugins: [ //js文件的压缩 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]
下一章学习多页面scss打包
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112228.html
摘要:前言在上一篇文章中我介绍了学习前的准备工作,下面开始的学习。目标一般我们接触到的关于的文章,都是以解读官方文档为主,而且是针对单页面项目的应用。我先在假设要做一个多页面应用,该如何去通过打包。 前言 在上一篇文章中我介绍了学习webpack前的准备工作,下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...
摘要:引言最近在学习,发现好多知识点,之前一点都没有接触过,如等等。使用本地安装,会存于文件夹内与属性内,更方便项目文件迁移以及协同开发等情况。 引言 最近在学习webpack,发现好多知识点,之前一点都没有接触过,如babel、core-js、browserslist等等。以前习惯了使用cli构建项目,很多东西不用考虑,拿来就用,这样的码农是不会有能力提升的,必须了解更多的知识点,才能成为...
摘要:例如现在的入门学习手记系列。收到粉丝留言和打赏的喜悦。安装上一篇入门学习手记一,主要是介绍了的核心概念,是整个学习过程的基础知识。新生成的类似如下入门学习手记因为生成的内容过多,我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公众号:前端修炼之路,欢迎关注。 最近开始想要维护一个个人的公众...
前言 上一篇文章我们讲了多页面js的打包,本篇文章我们继续scss的打包。 多页面css单独打包 首先,我们css编写采用的是sass,所以我们先来安装sass-loader以及可以用到的依赖 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安装完loaders,下面在webpack.config.js...
阅读 2930·2023-04-25 19:45
阅读 2640·2021-11-19 09:40
阅读 653·2021-10-14 09:49
阅读 2560·2021-09-30 09:47
阅读 2060·2021-09-26 09:55
阅读 1161·2021-09-22 16:01
阅读 2779·2019-08-30 14:19
阅读 672·2019-08-29 16:44