webpackage 2.x 使用

时间 2019-11-08

标签 webpackage 2.x 使用繁體版

原文原文链接

webpackage 2.x 使用

安装---(在项目目录下)

//1.初始化npm的配置(添加package.json)
npm init
//2.安装 webpackage
npm install webpack --save-dev

配置webpackage

项目结构以下

添加主页

<!DOCTYPE html>
<html>
    <header>
        <title>webpackage</title>
        <script src="dist/main.js"></script>
        <!-- <link rel="stylesheet" href="dist/main.css"> -->
    </header>
    <body>
        <div>WebPackage Test</div>
    </body>
</html>

添加main.js

/**
    路径问题  
    ./ 表示当前路径 
    ../表示上一级目录 
    /.../.../xxx.js表示绝对路径
*/
import './main.css';
// require('./main.css');
document.write("Add Something Test");

添加css

div{
    color:red;
}

添加文件webpack.config.js

var webpack = require('webpack');
module.exports = {
    entry: [
        //入口文件 须要处理的文件
        './dev/main.js'
    ],
    //输出文件配置
    output: {
        //配置目录
        path: __dirname+'/dist',//distribution
        //配置生成的名字
        filename: '[name].js'
    },
    module: {
        //配置文件使用什么loader加载
        rules: [{
            test: /\.css$/,
            //打包到js里面
            use: [ 'style-loader', 'css-loader' ]
        }]
    }
}

安装插件

npm install --save-dev css-loader
npm install style-loader --save-dev
npm install --save-dev script-loader

运行

webpack

参数解析

webpack --config XXX.js   //使用另外一份配置文件打包
webpack --watch   //监听变更并自动打包
webpack -p    //压缩混淆脚本
webpack -d    //生成map映射文件

说明

css文件默认打包到生成的js里面javascript

生成单独的css文件

安装插件

npm install --save-dev extract-text-webpack-plugin

修改配置

var webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: [
        './dev/main.js'
    ],
    output: {
        path: __dirname+'/dist',//distribution
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }]
    }
    ,plugins: [
        new ExtractTextPlugin("[name].css")
    ]
}

参考连接

webpack 教程
 官方github
extract-text-webpack-plugin
script-loader
style-loader
css-loader
require路径css