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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。