Webpack 常用命令总结以及常用打包压缩方法 |
您所在的位置:网站首页 › webpack指令 › Webpack 常用命令总结以及常用打包压缩方法 |
webpack.js是哪来的呢?就是通过webpack打包生成的js文件,接下来, 开始生成webpack.js文件: $ webpack main.js webpack.js 可以看到已经打包成功了,此时查看IDE中的项目目录,根目录下已经多了一个webpack.js文件。然后用浏览器打开index.html,效果如下: 此时查看网页源代码: 3.进阶操作 (配置webpack.config.js或者配置package.json,后者依赖前者)每次在命令行敲目录调试,是很痛苦的,因此需要一次配置,多次使用的方法。 在根目录下新建文件: webpack.config.js (名字就是这样,规定,不能改),内容如下: module.exports = {//入口文件位置 entry:__dirname+'/app/main.js', //出口 output:{ //路径 path:__dirname, filename:'webpack.js' } }这里的 __dirname是一个node的全局变量,用于指向当前的工作目录,调皮的我console.log了一下这个变量: 确认无疑。 这样,我们的webpack.js写完以后,可以直接在命令行中敲: $ webpack1可以发现,项目中也同样的会生成目标js文件,也就是webpack.js,这样非常方便,省事。 还有一种配置方法,将package.json文件中”scripts”里面添加键值对: 这样同样可以在项目目录生成目标js文件,直接在 命令行里敲 $ npm start //因为webpack是全局安装的,直接value给webpack,而不用跟路径1如果start被占用了/冲突了,也可以在scripts下面自定义一个键值对: "zq":"webpack" $ npm run zq //稍作修改cmd 命令最后还是可以生成。 4.webpack服务器监听代码变动,自动刷新及source-map 4.1关于source-map, 也就是在webpack.config.js中配置 devtool (develpment tool)的值,例如我这样配置: 在webpack完成文件打包后,会自动生成一个与目标文件相同名的 .map文件,用来说明打包文件的每个地方对应的是哪些文件,简而言之,让你能知道源码是在哪里错的,帮你刨根问底,而不用开发者自己去Debug。 参考文章1:入门WEBPACK,看这篇文章就够了—-简书 参考文章2:Webpack中的sourcemap 4.2 webpack服务器 首先单独安装 server 包 : $ npm install --save-dev webpack-dev-server1同样的,在webpack.config.js中做出相应的配置: module.exports = { devtool: 'source-map', entry: __dirname + "/app/main.js", output: { path: __dirname, filename: 'bundle.js' }, module: { }, devServer: { contentBase: "./",//本地服务器加载index.html页面所在的目录,这里写的是根目录 historyApiFallback: true,//不跳转 inline: true//实时刷新, } }配置好config后,还得配置一下package.json,在scirpts里面添加server: "scripts": { "start": "webpack", "server": "webpack-dev-server --open", "test": "echo \"Error: no test specified\" && exit 1" },接着,在命令行运行 $ npm run server /*届时服务器会自动启动, 并且打开浏览器,默认端口为8080,也可以 devServer:{ port:4040 //自己配置端口为4040 }下面是一个服务器跑起来后的演示结果,我不断的修改work.js 中 document.write的值,从而服务器会自动检测并刷新页面: 5.非JS文件的操作(img,json,css……),猪脚:Loaders 5.1 基本概念 前面都在说js文件,官网说什么文件都可以当做模块打包,下面就来试试非js文件。 首先要明确的是,webpack只能识别js文件,如果要识别非js文件,就需要loader来解析这些文件。 loaders 需要单独安装,并且在webpack.config.js中的modules关键字下进行配置。 Webpck2以上已经支持对json的解析打包,不需要额外的loaders,可以在main.js中 var json = require('../package.json')//json在它的上级目录 document.write(json.scripts.server);运行结果 : 可见,网页中,没有通过任何第三方loader,即可将json解析并打包成bundle.js。 5.2 Bable Bable可以使得开发者使用最新的ECMAscript标准来书写代码,而不用管新标准是否被当前使用的浏览器完全支持。 还是需要单独安装Bable的包: $ npm install --save-dev babel-core babel-loader babel-preset-env 安装完成后,在webpack.config.js下的module关键字下进行配置: module.exports = { devtool: 'source-map', entry: __dirname + "/app/main.js", output: { path: __dirname, filename: 'bundle.js' }, devtool: 'eval-source-map', devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true//实时刷新 }, module: { rules: [ { test: /\.js$/, //正则匹配,必须 use: { //使用到的loader loader: "babel-loader", //loader名 options: { //选项 presets: [ //预先配置 "env" ] } }, exclude: /node_modules/ //不包含的目录或文件 } ] } }; 5.3 CSS文件处理 webpack提供两个工具处理样式表,css-loader 和 style-loader,二者处理的任务不同,css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。 同样先安装两个包 style-loader和css-loader $ npm install --save-dev style-loader css-loader 1 module: { rules: [ {.......}, { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } 也可以简写: { test:/\.css$/. use:[{ loader:"style!css" //这里的执行顺序是从右往左,css应该在style之前执行 }] }根目录下新建 ./src/index.css,写一个body的背景为green,然后在入口文件main.js中,require(‘../src/index.css’),接着通过命令行$ webpack 此时查看index.html,发现页面背景已经变成绿色 6.插件plugins 先安装插件的包: cnpm install html-webpack-plugin1在webpack.config.js中 头部,引入依赖: let webpack = require('webpack');1然后在webpack.config.js中配置根键值对: plugins: [ new webpack.BannerPlugin('版权所有,翻版必究') ], 点击复制链接 与好友分享!回本站首页 相关TAG标签 上一篇:java学习路线 下一篇:SSM框架快速整合实例 相关文章 热门专题推荐 vmware win7激活工具 win10激活工具 excel word office激活 小马激活工具 重装系统 数据恢复 u盘启动工具 图文推荐![]() ![]() ![]() ![]() 关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心 版权所有: 红黑联盟--致力于做实用的IT技术学习网站 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |