webpack超详细配置, 使用教程(图文)

2017-11-08  本文已影响45人  刘翾

博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目;

流程

webpack安装


webpack配置

}
```
我们随便在index.html和入口文件entry.js写点什么看看是否成功配置,

```
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>ss</title>
</head>
<body>
111
    <script src="./out/index.js"></script>//注意在这里引入的是打包完成的js文件
</body>
</html>
```


```javascript
//entry.js
console.log('1234');
```
之后使用Git Bash here 或者 cmd cd命令使目录为当前项目目录, 输入**webpack**或者**webpack -w**命令, 查看index.html是否成功console出1234;

webpack 和 webpack -w 区别
webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包, 但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 ctrl+c)

webpack loader加载器

接下来我们继续配置loader, 通过加载器处理文件：比如 sass less 等, 告知 webpack 每一种文件都需要使用什么加载器来处理。

<html lang="en">
<head>
<meta charset="UTF-8" />
<title>text</title>
</head>
<body>
<div class="demo1"></div>
<div class="demo2"></div>
<script src="./out/index.js"></script>
</body>
</html>
```
因为在webpack中所有文件都是模块, 所以必须要将css引入. 在刚刚的entry.js中添加如下代码.

```javascript
//entry.js
require('../css/index.css');//引入css文件
console.log("1234");
```

打包webpack一下看看效果
![这里写图片描述](https://img.haomeiwen.com/i8424049/c8847d98630a9e55?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br>

关于图片的打包

webpack进阶设定

我们在项目中有多个html文件时怎么处理呢?, 接下来我们重新设定配置文件, webpack.config.js

    module.exports = {
            entry : {index1: './src/js/entry.js', index2: './src/js/entry2.js'},
        output : {
                filename : '[name].js',//这样就可以生成两个js文件, 名字分别为index1.js, 和index2.js
                publicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误
                path : __dirname + '/out'
            },
            module : {
                rules: [
                    {test: /.js$/, use: ['babel-loader']},
                    {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
                    //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
                    {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
                    {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
                ]
            },
    }

webpack插件使用

首先我们由于要使用webpack插件, 因此我们要重新下载一下webpack包, 将目录定位到当前项目目录, 输入npm install webpack
之后我们修改webpack.config.js, 将下面代码放到配置文件开头. 这样就可以使用插件了

var webpack = require('webpack');

将插件信息写到配置文件里

var webpack = require('webpack');
var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true});//代码压缩

var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');//把公共模块提取出来, 并取名为'common'(名字自起), webpack之后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件

var ExtractTextPlugin = require("extract-text-webpack-plugin");//将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改

var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});//引入jquery



module.exports = {
    entry : {index: './src/js/entry.js', index2: './src/js/entry2.js'},
    output : {
        filename : '[name].js',
        publicPath: __dirname + '/out',
        path : __dirname + '/out'
    },
    module : {
        rules: [
            {test: /.js$/, use: ['babel-loader']},
            //{test: /.css$/, use: ['style-loader', 'css-loader']},
            {test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},
            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},
            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
        ]
    },
    plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'),providePlugin]//插件集合
}

webpack服务器

首先先定位目录输入命令 npm install webpack-dev-server -g, 修改webpack.config.js文件

publicPath: 'http://localhost:8080/out',

html文件所引用的目录也要更改:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>text</title>
     <link rel="stylesheet" href="http://localhost:8080/out/index.css">
</head>
<body>
    <a href="http://localhost:8080/index2.html">11</a>
    <div class="demo1"></div>
    <div class="demo2"></div>
    <script src="http://localhost:8080/out/common.js"></script>
    <script src="http://localhost:8080/out/index.js"></script>
</body>
</html>

webpack-dev-server一下看看效果

小工具: webpace-dev-server --devtool eval-source-map --progess --colors打包时输入这一行可以直接找到文件如果出错时的位置

小知识点: 上面这一句话如果觉得太长可以将

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "xuan": "webpack-dev-server --devtool eval-source-map --progress --colors"
  },

这一段代码放到项目目录下的package.json里, 这样调试时如果输入npm run xuan就等于输入那一长串代码

上一篇下一篇

猜你喜欢

热点阅读