webpack使用(二)

最新推荐文章于 2022-11-20 21:20:35 发布

名明鸣冥

最新推荐文章于 2022-11-20 21:20:35 发布

阅读量234

点赞数

分类专栏：前端 web 文章标签：插件 javascript less webpack

本文链接：https://blog.csdn.net/mingover/article/details/60886032

版权

web 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

概要

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

名明鸣冥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack使用(二)

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

扫一扫

专栏目录