webpack使用(二)

    xiaoxiao2021-03-25  96

    概要

    loader的使用,plugin的使用,package.json的引入,webpack-dev-server加broswer插件的组合使用

    loader加载less

    上一单知道,我们加载css是需要编译的,那何不如,直接用less呢?!!

    我们建4个文件 一个js,一个html,一个config,一个less

    安装less 和webpack 的loader npm install less npm install style-loader css-loader less-loader 配置webpack.config.js module.exports = { entry: './entry.js', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },] } }; a.less @color: yellow; h1 { color: @color; } entry.js require('./a.less'); document.write('<h1>helloworld.<h1>') 编译: webpack

    运行: 直接点开index.html,

    说明: 运行机制都一样,生成一个bundle.js,然后访问index.html 有很多的loader ,请参考 官网的loader列表 http://webpack.github.io/docs/list-of-loaders.html

    一个很简单的plugin例子

    DefinePlugin 这个插件,定义了一个全局的静态 变量 _mypath,我们要在js里面使用它.

    webpack.config.js var webpack = require('webpack'); var envPlugin = new webpack.DefinePlugin({ _mypath: 14 }); module.exports = { entry: './entry.js', output: { filename: 'bundle.js' }, plugins: [envPlugin] }; index.html <html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> </body> </html> entry.js document.write('It works.' + _mypath)

    直接编译后访问index.html, 就能看到效果了

    工程加上package.json

    我们copy那个less的代码,直接在目录下 npm init,就会发现多了一个package.json 然后我们要安装各模块

    npm install less style-loader css-loader less-loader --save

    加上–save,即把依赖的内容加到package.json,查看下:

    { "name": "c7", "version": "1.0.0", "description": "", "main": "entry.js", "author": "", "license": "ISC", "dependencies": { "css-loader": "^0.26.4", "less": "^2.7.2", "less-loader": "^3.0.0", "style-loader": "^0.13.2" } }

    以后copy工程,不用把node_modules 文件夹带着了,用这个package.json 就行,要用的时候,npm install,即可把dependencies的内容给下下来.这个和pom.xml倒是很像呢 。

    实现一条命令编译加弹出浏览器

    这里说三点, 一是 webpack-dev-server和 和webpack 命令类似 但这里会启动一个服务启动默认8080端口, 二是webpack-browser-plugin 可以弹出浏览器 三是 package.json 的scripts命令.

    在上面的工程里改

    webpack.config.js const WebpackBrowserPlugin = require('webpack-browser-plugin'); module.exports = { entry: './entry.js', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, ] }, plugins: [new WebpackBrowserPlugin()] }; package.json { "name": "c7", "version": "1.0.0", "description": "", "main": "entry.js", "scripts": { "go": "webpack-dev-server" }, "author": "", "license": "ISC", "dependencies": { "css-loader": "^0.26.4", "less": "^2.7.2", "less-loader": "^3.0.0", "style-loader": "^0.13.2", "webpack-browser-plugin": "^1.0.20" } } 安装插件 npm install webpack-browser-plugin --save 然后在命令上直接运行 npm run go

    结果就是弹出浏览器,localhost:8080

    转载请注明原文地址: https://ju.6miu.com/read-7468.html

    最新回复(0)