webpack运行配置(1) webpack运行配置(1)

webpack特点

- webpack本质上是nodejs的一个包，所以webpack是基于node.exe来运行的 - 想要运行webpack就必须要安装node.exe - webpakc是在开发阶段要被程序员使用的，但是在生成环节中是用不到的(生产环节已经打包压缩好了)

如何安装webpack

安装node.exe的同事会自动安装好npm 包管理工具
npm 包这个管理器下载的包是来源于国外，所以速度回很慢，甚至出错
所以我们使用国内taobao开发的一个cnpm来替代npm的使用

使用webpack之前的准备工作

安装node环境
npm install cnpm -g 将cnpm全局安装(使任何地方都可以使用)
cnpm install webpack -g 将webpack安装成为全局包
cnpm install webpack --save-dev 当前项目根目录安装webpack,给当前项目使用
npm init -y 当前项目根目录初始化npm,会有package.json
如果运行 webpack 执行webpack.config.js
如果要执行webpack.develop.config.js,就运行webpack --config
webpack.develop.config.js,当然也可以在package.json中设置

{ "name": "01webpack", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", //可以直接命令运行npm run develop 来执行webpack.develop.config.js文件 "develop": "webpack --config webpack.develop.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-loader": "^7.1.0", "less": "^2.7.2", "less-loader": "^4.0.4", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "webpack": "^3.0.0", "webpack-dev-server": "^2.5.0" } }

学习nodejs的模块化开发(main.js依赖calc.js写法）

1、在nodejs中一切.js文件都可以是一个模块 2、calc.js function add(x,y){return x + y; } module.exports = add; 3、main.js使用calc.js中的add方法导calc.js模块 // webpack的入口文件 var add = require('./calc.js'); // console.log(add(2,3)); // 获取到页面上面所有dom对象 var v1obj = document.getElementById('v1'); var v2obj = document.getElementById('v2'); var btobj = document.getElementById('bt'); var resobj = document.getElementById('res'); btobj.onclick = function(){ // 实现一个加法功能 var v1Val = (v1obj.value - 0); var v2Val = (v2obj.value - 0); resobj.value = https://www.it610.com/article/add(v1Val,v2Val); }

webpack的基本使用方式

第一种使用方式：webpack 入口文件.js的路径输出文件.js的路径

在当前要打包的入口.js文件的位置打开cmd ，输入 webpack 入口文件.js输出文件.js

第二种使用方式：webpack 结合 webpack.config.js 配置文件进行打包

目的：在cmd面板中直接利用webpack指令即可进行打包，特点：如果直接指向 webpack 指令，webpack指令会自动去查找当前目录下的webpack.config.js文件编写步骤： 1、webpack.config.js中定义入口文件和输出文件的内容 module.exports={ entry:path.resolve(__dirname,'src/main.js'), ---main.js的路径 output: { path: path.resolve(__dirname, 'dist'), ---自己创建的dist文件夹,用来放bundle.js filename: 'bundle.js', },2、在与webpack.config.js文件相同的目录下打开cmd，执行webpack即可完成打包

利用webpack完成 css文件的打包

【webpack运行配置(1)】利用webpack完成 css文件的打包
注意点：webpack是利用style-loader和css-loader这两个nodejs的包来完成.css文件的打包工作
步骤：
1、cnpm i style-loader css-loader 安装本地包
style-loader与css-loader会依赖于其他的很多包，所以一般我们在将这个项目文件发送给其他人使用的时候，是要删除 node_modeuls这个文件夹的，这时候就有可能不知道这个项目中依赖于哪些第三方包

解决方案： node.exe中提供了一个 package.json文件用来存放当前安装的所有包，这些包分为： 1、开发阶段使用的包cnpm i 包名称 --save-dev --save-dev对应的是package.json devDependencies节点 2、生产环境阶段使用的包cnpm i 包名称 --save --save对应的是package.json dependencies节点保存的步骤： 1、利用 cnpm init 来生成一个 package.json文件 2、cnpm i style-loader css-loader--save-dev2、将style-loader与css-loader配置在 webpack.config.js中，webpack才能使用这两个loader文件 webpack.config.js中定义入口文件和输出文件的内容(见最后webpack.config.js的配置)

利用webpack完成 sass文件的打包

步骤： 1、cnpm install sass-loader node-sass --save-dev 2、sass-loader 在webpack.config.js中增加一个 loader节点注意点： sass文件的打包依赖于 sass-loader 解析成原生的 .css语法所以要最终打包成功就必须要依赖于style-loader css-loader 所以在配置 sass的时候， style-loader!css-loade!sass-loader{ test:/\.scss$/,//表示当前要打包的文件的后缀正则表达式 loader:'style-loader!css-loader!sass-loader' //实现sass文件的打包 }

利用webpack完成 less文件的打包

步骤： 1、cnpm install less-loader less--save-dev 2、less-loader 在webpack.config.js中增加一个 loader节点注意点：在配置 loader:'' 对应的loader的时候，要按照 style-loader!css-loade!less-loader 配置

利用webpack完成 url()导入资源文件的打包

例如需求： background-image: url(../imgs/home.png) 那么webpack必须利用 url-loader 这个包去解析，而url-loader依赖file-loader，所以步骤： 1、npm i url-loader file-loader --save-dev 2、url-loader在webpack.config.js中增加一个 loader节点

利用webpack完成 es6转es5

步骤： 1、npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev注意：babel-plugin-transform-runtime 安装是为了在后面能够正常编译.vue这个文件不出错

main.js配置

// webpack的入口文件 // 在此处main.js实现的是获取到dom对象，实现一个加法功能 var add = require('./calc.js'); // 导入site.css 以后webpack才能将site.css打包 require('./1.css'); require('./site1.scss'); require('./site2.less'); // console.log(add(2,3)); // 获取到页面上面所有dom对象 var v1obj = document.getElementById('v1'); var v2obj = document.getElementById('v2'); var btobj = document.getElementById('bt'); var resobj = document.getElementById('res'); btobj.onclick = function(){ // 实现一个加法功能 var v1Val = (v1obj.value - 0); var v2Val = (v2obj.value - 0); resobj.value = https://www.it610.com/article/add(v1Val,v2Val); }

webpack.config.js配置

var path = require('path'); module.exports = { entry:path.resolve(__dirname,'src/main.js'), output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module:{ loaders:[ { // 将当前项目中所有的.js文件都要进行es6转es5操作，node_moudels除外 test:/\.js$/,//表示当前要打包的文件的后缀正则表达式 // loader:'babel-loader?presets[]=es2015', //如果写到这里，将来在打包.vue文件的时候会报错，表示先利用css-loader解析.css文件，再调用style-loader打包 loader:'babel-loader', exclude:/node_modules/ , //node_modules中的所有.js文件不去转换，提高打包性能}, { // 打包css文件 test:/\.css$/,//表示当前要打包的文件的后缀正则表达式 loader:'style-loader!css-loader' //表示先利用css-loader解析.css文件，再调用style-loader打包 }, { // 打包 sass文件 test:/\.scss$/,//表示当前要打包的文件的后缀正则表达式 loader:'style-loader!css-loader!sass-loader' //实现sass文件的打包 }, { // 打包less文件 test:/\.less$/,//表示当前要打包的文件的后缀正则表达式 loader:'style-loader!css-loader!less-loader' //实现sass文件的打包 }, { // 打包url()请求的资源文件 test:/\.(png|jpg|gif|ttf)$/,// 注意url可能请求多个资源，所以将来在项目中通过url导入的资源扩展名必须配置在这里 // loader:'url-loader'//这种配置会将图片变成一个base64的字符串存储到build.js中，如果图片很大的话，那么会造成build.js也比较大，加载的时候会导致效率低下 loader:'url-loader?limit=40000' //限制图片的大小如果<40k则把他当做base64字符串存储到build.js中，如果>40k 则单独将图片存放到磁盘上，将路径打包进去bulid.js } ] }, babel:{ presets: ['es2015'], plugins: ['transform-runtime']//这句代码就是为了解决打包.vue文件不报错 } }