webpackage 2.x 使用

最新推荐文章于 2024-06-27 19:29:04 发布

weixin_30642305

最新推荐文章于 2024-06-27 19:29:04 发布

阅读量740

点赞数

文章标签： webpack json ViewUI

原文链接：http://www.cnblogs.com/final-elysion/p/6636278.html

版权

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里面

生成单独的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路径

转载于:https://www.cnblogs.com/final-elysion/p/6636278.html

weixin_30642305

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpackage 2.x 使用

webpackage 2.x 使用安装---(在项目目录下)//1.初始化npm的配置(添加package.json)npm init//2.安装 webpackagenpm install webpack --save-dev配置webpackage项目结构如下添加主页<!DOCTYPE html><html> <header>...
复制链接

扫一扫