Webpack基础

Posted 2020-08-20

官方文档：

http://webpack.github.io/docs/

 

1. 安装python
2. 安装node.js msi
3. npm自动打包在最新的node.js安装包里

被封的包用国内镜像下载

// 全局安装webpack
npm install webpack -g

常规项目把依赖写入package.json包中去
// 进入项目
cd myproject
// 初始化npm，生成package.json
npm init
// 写入package.json关于webpack的依赖
npm install webpack --save-dev

在项目目录新建webpack.config.js文件，并且写入：

var webpack = require(‘webpack‘);
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(‘common.js‘);

module.exports = {
    // 插件项
    plugins: [commonsPlugin],
    // 页面入口文件配置
    entry: {
        index: ‘./src/js/page/index.js‘,
        component: ‘./src/js/page/component.js‘
    },
    // 入口文件输出配置
    output: {
        path: ‘dist/js/page‘,
        filename: ‘[name].js‘
    },
    module: {
        // 加载器配置
        loaders: [
            // .css文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: ‘style-loader!css-loader‘ },
            // .js文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: ‘jsx-loader?harmony‘ },
            // .scss文件使用style-loader、css-loader和sass-loader来编译处理
            // loader可以省略不写，多个loader之间用!连接
            { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘ },
            // 图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            // url-loader将样式中引用到的图片转为模块来处理，使用该加载器需要先进性安装：
            // npm install url-loader --save-dev
            { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘ }
        ]
    },
    // 其他解决方案配置
    resolve: {
        // 从这里查找module
        root: ‘E:/myproject/node_modules‘, // 绝对路径
        // 自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘],
        // 模块别名定义，方便后续直接引用别名，无须多谢长长的地址
        alias: {
            AppStore: ‘js/stores/AppStores.js‘, // 后续直接 require(‘AppStore‘) 即可
            ActionType: ‘js/actions/ActionType.js‘,
            AppAction: ‘js/actions/AppAction.js‘
        }
    }
};

 

配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式
（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）。

// 执行webpack.config.js文件
webpack
// 压缩混淆脚本，这个非常非常重要！
webpack - p

// 安装vue框架
npm install vue --save-dev

我的webpack与vue打包实例github地址：
https://github.com/liuqiuchen/myWebpack