编译工具那些事_bios编译工具-优快云博客

打包配置信息说明

Step1:

Step2: 接下来创建并编写配置文件. 首先我们先介绍几个配置文件的参数.
- entry：是页面入口文件配置（html文件引入唯一的js 文件）
- output：对应输出项配置
  - path ：入口文件最终要输出到哪里，
  - filename：输出文件的名称
  - publicPath：公共资源路径
Step3: 在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件. 例如:

src文件夹

Step4: 在src的js下创建一个入口文件, 我创建的叫做entry.js, 在项目目录再创建一个index.html用来调试使用. 编写webpack.config.js文件,

//webpack.config.js
module.exports = {
    entry : './src/js/entry.js',//入口文件
    output : {//输出文件
        filename : 'index.js',//输出文件名
        path : __dirname + '/out'//输出文件路径
    },
}

webpack loader加载器

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

Step1: 为了方便我们先统一把所有的包都先下载下来, 下面再慢慢解释.

Step2: 下载完成后, 我们修改webpack.config.js文件, 将加载器引入.

module.exports = {
    entry :  './src/js/entry.js',
    output : {
        filename : 'index.js',
        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.config.js中修改一下

module.exports = {
        entry :  './src/js/entry.js',
        output : {
            filename : 'index.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进阶设定

我们在项目中有多个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]//插件集合
}